forked from kidgrow-microservices-platform

zhaoxiaohao
2020-11-25 f6d390988b1c9b5695338214e95ff0d6da70b300
kidgrow-web/kidgrow-web-manager/src/main/resources/static/pages/console.html
@@ -3,85 +3,178 @@
<head>
    <title>首页</title>
    <meta charset="utf-8"/>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <script type="text/javascript" src="../assets/libs/echarts.min.js"></script>
    <style>
        .layui-card-header {
            text-align:left;
            text-align: left;
        }
        .layuiadmin-badge {
            float:right;
            margin-top:12px;
            float: right;
            margin-top: 12px;
        }
        .big-font {
            text-align:left;
            text-align: left;
            font-size: 250%;
            height: 30px;
        }
    </style>
</head>
<body>
<div class="layui-card-body" style="text-align: center;">
    <div class="layui-row layui-col-space10">
        <div class="layui-col-sm2 layui-col-md2">
            <div class="layui-card">
                <div class="layui-card-header">在线人数
                    <span class="layui-badge layui-bg-cyan layuiadmin-badge">时</span>
                <div class="layui-card-header">正式医院
                </div>
                <div class="layui-card-body layuiadmin-card-list">
                    <p class="big-font" id="userCnt"></p>
                    <a href="/#!syshospital">
                        <p class="big-font" id="h_hospital"></p>
                    </a>
                </div>
            </div>
        </div>
        <div class="layui-col-sm2 layui-col-md2">
            <div class="layui-card">
                <div class="layui-card-header">PV
                    <span class="layui-badge layui-bg-green layuiadmin-badge">天</span>
                <div class="layui-card-header">产品/套餐总量
                </div>
                <div class="layui-card-body layuiadmin-card-list">
                    <p class="big-font" id="pv"></p>
                    <a href="/#!product">
                        <p class="big-font" id="u_product"></p>
                    </a>
                </div>
            </div>
        </div>
        <div class="layui-col-sm2 layui-col-md2">
            <div class="layui-card">
                <div class="layui-card-header">UV
                    <span class="layui-badge layui-bg-green layuiadmin-badge">天</span>
                <div class="layui-card-header">待审核试用套餐
                </div>
                <div class="layui-card-body layuiadmin-card-list">
                    <p class="big-font" id="uv"></p>
                    <a href="/#!verifyRecharge">
                        <p class="big-font" id="t_product"></p>
                    </a>
                </div>
            </div>
        </div>
        <div class="layui-col-sm3 layui-col-md3">
        <div class="layui-col-sm2 layui-col-md2">
            <div class="layui-card">
                <div class="layui-card-header">周访问量
                    <span class="layui-badge layui-bg-blue layuiadmin-badge">周</span>
                <div class="layui-card-header">快到期套餐
                </div>
                <div class="layui-card-body layuiadmin-card-list">
                    <p class="big-font" id="weekPv"></p>
                    <a href="/#!productEnd">
                        <p class="big-font" id="t_product_end"></p>
                    </a>
                </div>
            </div>
        </div>
        <div class="layui-col-sm3 layui-col-md3">
        <div class="layui-col-sm3 layui-col-md2">
            <div class="layui-card">
                <div class="layui-card-header">月访问量
                    <span class="layui-badge layui-bg-orange layuiadmin-badge">月</span>
                <div class="layui-card-header">用户反馈
                </div>
                <div class="layui-card-body layuiadmin-card-list">
                    <p class="big-font" id="monthPv"></p>
                    <a href="/#!feedback">
                        <p class="big-font" id="u_feedback"></p>
                    </a>
                </div>
            </div>
        </div>
        <div class="layui-col-sm3 layui-col-md2">
            <div class="layui-card">
                <div class="layui-card-header">数据需求
                </div>
                <div class="layui-card-body layuiadmin-card-list">
                    <a href="/#!dataneed">
                        <p class="big-font" id="d_dataneed"></p>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-row layui-col-space10">
        <div class="layui-col-sm2 layui-col-md2">
            <div class="layui-card">
                <div class="layui-card-header">H端医生
                </div>
                <div class="layui-card-body layuiadmin-card-list">
                    <a href="/#!doctor">
                        <p class="big-font" id="h_doctor"></p>
                    </a>
                </div>
            </div>
        </div>
        <div class="layui-col-sm2 layui-col-md2">
            <div class="layui-card">
                <div class="layui-card-header">C端医生
                </div>
                <div class="layui-card-body layuiadmin-card-list">
                    <a href="/#!doctor">
                        <p class="big-font" id="c_doctor"></p>
                    </a>
                </div>
            </div>
        </div>
        <div class="layui-col-sm2 layui-col-md2">
            <div class="layui-card">
                <div class="layui-card-header">待审核医生
                </div>
                <div class="layui-card-body layuiadmin-card-list">
                    <a href="/#!doctor">
                        <p class="big-font" id="ht_doctor"></p>
                    </a>
                </div>
            </div>
        </div>
        <div class="layui-col-sm3 layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">签约医生
                </div>
                <div class="layui-card-body layuiadmin-card-list">
                    <a href="/#!doctor">
                        <p class="big-font" id="u_signing"></p>
                    </a>
                </div>
            </div>
        </div>
        <div class="layui-col-sm3 layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">医答医生
                </div>
                <div class="layui-card-body layuiadmin-card-list">
                    <a href="/#!doctor">
                        <p class="big-font" id="d_isanswer"></p>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <!-- <div class="layui-row layui-col-space10">
        <div class="layui-col-lg12 layui-col-md12">
            <div class="layui-card">
                <div class="card-block">
                    <div id="week-container" style="height:350px"></div>
                    <div id="contract" style="height:350px">
                    </div>
                </div>
            </div>
        </div>
    </div> -->
    <div class="layui-row layui-col-space10">
        <div class="layui-col-lg6 layui-col-md6">
            <div class="layui-card">
                <div class="card-block">
                    <div id="products" style="height:300px"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-lg6 layui-col-lg6">
            <div class="layui-card">
                <div class="card-block">
                    <div id="contract" style="height:300px"></div>
                </div>
            </div>
        </div>
@@ -90,14 +183,14 @@
        <div class="layui-col-lg6 layui-col-md6">
            <div class="layui-card">
                <div class="card-block">
                    <div id="browser-container" style="height:300px"></div>
                    <div id="aiphoto" style="height:300px"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-lg6 layui-col-lg6">
            <div class="layui-card">
                <div class="card-block">
                    <div id="operatingSystem-container" style="height:300px"></div>
                    <div id="report" style="height:300px"></div>
                </div>
            </div>
        </div>
@@ -105,163 +198,428 @@
</div>
<script type="text/javascript">
    layui.use(['admin'], function () {
    layui.use(['util', 'admin', 'config'], function () {
        let admin = layui.admin;
        let config = layui.config;
        let util = layui.util;
        let $ = layui.jquery;
        var counts = 0;
        var noData="无权查看";
        layer.load(2);
        // 加载医院统计数据
        var loadHospitalChart = function (datatype) {
            admin.req("api-user/syshospital/chartHospital?datatype=" + datatype, {}, function (data) {
                if (0 === data.code) {
                    counts = data.data;
                }
            }, "get");
        }
        // 加载医生统计数据
        var loadDoctorChart = function (datatype) {
            admin.req("api-user/sysdoctor/chartDoctor?datatype=" + datatype, {}, function (data) {
                if (0 === data.code) {
                    counts = data.data;
                }
            }, "get");
        }
        // 加载反馈需求审核统计数据
        var loadOprationChart = function (datatype) {
            admin.req("api-opration/productorderdetail/oprationChart?datatype=" + datatype, {},
                function (data) {
                    if (0 === data.code) {
                        counts = data.data;
                    }
                }, "get");
        }
        // 加载合同统计数据
        var loadProductOrderChart = function (params) {
            admin.req("api-opration/productorderdetail/productOrderChart", params, function (data) {
                if (0 === data.code) {
                    counts = data.data;
                }
            }, "get");
        }
        // 加载套餐使用量统计数据
        var loadProCountChart = function () {
            admin.req("api-opration/productorderdetail/proCountChart", {}, function (data) {
                if (0 === data.code) {
                    return data.data;
                } else {
                    return null;
                }
            }, "get");
        }
        // 加载套餐到期统计数据
        var loadProEndCountChart = function () {
        admin.req("api-opration/productorderdetail/productEnd", {page: 1,limit: 9999,monthPar: 1
,aiCountPar: 50}, function (data) {
            if (0 === data.code) {
                counts= data.count;
            } else {
                return null;
            }
        }, "get");
        }
        //加载套餐使用图表
        var loadContractChart = function () {
            var chartcontract = echarts.init(document.getElementById('contract'));
            admin.req("api-opration/productorderdetail/proCountChart", {}, function (data) {
                if (0 === data.code) {
                    var listData = data.data;
                    var Xdata = new Array();
                    var Ydata = new Array();
                    if (listData != null) {
                        for (let index = 0; index < listData.length; index++) {
                            Xdata.push(listData[index].units);
                            Ydata.push(listData[index].ccount);
                        }
                        var optionchart = {
                            title: {
                                text: '套餐使用数量统计(前10个)'
                            },
                            color: ['#3398DB'],
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: { // 坐标轴指示器,坐标轴触发有效
                                    type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
                                }
                            },
                            xAxis: {
                                type: 'category',
                                data: Xdata
                            },
                            yAxis: {
                                type: 'value'
                            },
                            series: [{
                                name: '使用数量',
                                data: Ydata,
                                type: 'bar',
                                barWidth: '10%',
                                showBackground: true
                            }]
                        };
                        chartcontract.setOption(optionchart, true);
                    }
                    layer.closeAll('loading');
                }
            }, "get");
        }
        let browserChart = echarts.init(document.getElementById("browser-container"));
        browserChart.setOption({
            title : {
                text: '浏览器分布',
                subtext: '',
                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {},
            series : []
        });
        browserChart.showLoading();
        let osChart = echarts.init(document.getElementById("operatingSystem-container"));
        osChart.setOption({
            title : {
                text: '系统分布',
                subtext: '',
                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {},
            series : []
        });
        osChart.showLoading();
        let weekChart = echarts.init(document.getElementById("week-container"));
        weekChart.setOption({
            title: {
                text: '流量趋势'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
        //加载合同图表
        var loadProductChart = function () {
            var chartproducts = echarts.init(document.getElementById('products'));
            admin.req("api-opration/productorderdetail/productOrderChart", {
                datatype: 1,
                startTime: "",
                endTime: ""
            }, function (data) {
                if (0 === data.code) {
                    var listData = data.data;
                    var Xdata = new Array();
                    var Ydata = new Array();
                    if (listData != null) {
                        for (let index = 0; index < listData.length; index++) {
                            Xdata.push(listData[index].units);
                            Ydata.push(listData[index].ccount);
                        }
                        var optionchart = {
                            title: {
                                text: '合同签订统计'
                            },
                            color: ['#3398DB'],
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: { // 坐标轴指示器,坐标轴触发有效
                                    type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
                                }
                            },
                            xAxis: {
                                type: 'category',
                                data: Xdata
                            },
                            yAxis: {
                                type: 'value'
                            },
                            series: [{
                                name: '合同数量',
                                data: Ydata,
                                type: 'bar',
                                barWidth: '10%',
                                showBackground: true
                            }]
                        };
                        chartproducts.setOption(optionchart, true);
                    }
                }
            },
            legend: {
                data: ['访问量(PV)', '独立用户(UV)']
            },
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    data: []
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: []
        });
        weekChart.showLoading();
                layer.closeAll('loading');
            }, "get");
        }
        admin.req('api-log/requestStat', {}, function (data) {
            $('#pv').html(data.currDate_pv);
            $('#uv').html(data.currDate_uv);
            $('#weekPv').html(data.currWeek_pv);
            $('#monthPv').html(data.currMonth_pv);
            $('#userCnt').html(data.currHour_uv);
            browserChart.hideLoading()
            browserChart.setOption({
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: data.browser_legendData
                },
                series : [
                    {
                        name: '浏览器',
                        type: 'pie',
                        radius : '55%',
                        center: ['50%', '60%'],
                        data: data.browser_datas,
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
        //加载报告图表
        var loadreportChart = function (dataType) {
            var nowYear = new Date().getFullYear();
            var apiUrl =
                "api-bicenter/statisticalmonthlydata/findList?itemCode=3201&page=1&limit=12&startYearMonth=" +
                nowYear + "01&endYearMonth=" + nowYear + "12";
            if (dataType == "1") {
                apiUrl =
                    "api-bicenter/statisticalyearlydata/findList?itemCode=3201&page=1&limit=10&startYear=" +
                    nowYear - 5 + "&endYear=" + nowYear;
            }
            var chartreport = echarts.init(document.getElementById('report'));
            admin.req(apiUrl, {}, function (data) {
                if (0 === data.code) {
                    var listData = data.data.data;
                    var Xdata = new Array();
                    var Ydata = new Array();
                    if (listData != null) {
                        for (let index = 0; index < listData.length; index++) {
                            Ydata.push(listData[index].itemValue);
                            if (dataType == "1") {
                                Xdata.push(listData[index].collectYear);
                            } else if (dataType == "0") {
                                Xdata.push(listData[index].collectYearMonth);
                            }
                        }
                        var optionchart = {
                            title: {
                                text: 'H端报告量'
                            },
                            color: ['#3398DB'],
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: { // 坐标轴指示器,坐标轴触发有效
                                    type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
                                }
                            },
                            xAxis: {
                                type: 'category',
                                data: Xdata
                            },
                            yAxis: {
                                type: 'value'
                            },
                            series: [{
                                name: '报告数量',
                                data: Ydata,
                                type: 'bar',
                                barWidth: '10%',
                                showBackground: true
                            }]
                        };
                        chartreport.setOption(optionchart, true);
                    }
                ]
            });
                    layer.closeAll('loading');
                }
            }, "get");
        }
            osChart.hideLoading()
            osChart.setOption({
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: data.operatingSystem_legendData
                },
                series : [
                    {
                        name: '操作系统',
                        type: 'pie',
                        radius : '55%',
                        center: ['50%', '60%'],
                        data: data.operatingSystem_datas,
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
        //加载读片图表
        var loadaiphotoChart = function (dataType) {
            var nowYear = new Date().getFullYear();
            var apiUrl =
                "api-bicenter/statisticalmonthlydata/findList?itemCode=1301&page=1&limit=12&startYearMonth=" +
                nowYear + "01&endYearMonth=" + nowYear + "12";
            if (dataType == "1") {
                apiUrl =
                    "api-bicenter/statisticalyearlydata/findList?itemCode=1301&page=1&limit=10&startYear=" +
                    nowYear - 5 + "&endYear=" + nowYear;
            }
            var chartaiphoto = echarts.init(document.getElementById('aiphoto'));
            admin.req(apiUrl, {}, function (data) {
                if (0 === data.code) {
                    var listData = data.data.data;
                    var Xdata = new Array();
                    var Ydata = new Array();
                    if (listData != null) {
                        for (let index = 0; index < listData.length; index++) {
                            Ydata.push(listData[index].itemValue);
                            if (dataType == "1") {
                                Xdata.push(listData[index].collectYear);
                            } else if (dataType == "0") {
                                Xdata.push(listData[index].collectYearMonth);
                            }
                        }
                        var optionchart = {
                            title: {
                                text: '读片量'
                            },
                            color: ['#3398DB'],
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: { // 坐标轴指示器,坐标轴触发有效
                                    type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
                                }
                            },
                            xAxis: {
                                type: 'category',
                                data: Xdata
                            },
                            yAxis: {
                                type: 'value'
                            },
                            series: [{
                                name: '读片数量',
                                data: Ydata,
                                type: 'bar',
                                barWidth: '10%',
                                showBackground: true
                            }]
                        };
                        chartaiphoto.setOption(optionchart, true);
                    }
                ]
            });
                    layer.closeAll('loading');
                }
            }, "get");
        }
            weekChart.hideLoading()
            weekChart.setOption({
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data: data.statWeek_items
                    }
                ],
                series: [
                    {
                        name: '访问量(PV)',
                        type: 'line',
                        areaStyle: {},
                        label: {
                            normal: {
                                show: true,
                                position: 'top'
                            }
                        },
                        data: data.statWeek_pv
                    },
                    {
                        name: '独立用户(UV)',
                        type: 'line',
                        areaStyle: {},
                        data: data.statWeek_uv
                    }
                ]
            });
        }, 'GET');
        //先拿到当前登录用户的信息
        var nowUser = config.getUser();
        if (!strUtil.isEmpty(nowUser)) {
            var userRole = nowUser.roles;
            for (let index = 0; index < userRole.length; index++) {
                const element = userRole[index];
                if (element.code == "admin" ||
                    element.code == "dev_admin" ||
                    element.code == "pc_admin" ||
                    element.code == "oprationmanager" ||
                    element.code == "salemanager" ||
                    element.code == "dev_user" ||
                    element.code == "shop_admin" ||
                    element.code == "app_admin") {
                    //正式医院
                    loadHospitalChart(0);
                    $("#h_hospital").html(counts);
                    //产品/套餐总量
                    loadOprationChart(1);
                    $("#u_product").html(counts);
                    //待审核试用套餐
                    loadOprationChart(0);
                    $("#t_product").html(counts);
                    //套餐到期
                    loadProEndCountChart();
                    $("#t_product_end").html(counts);
                    //用户反馈
                    loadOprationChart(2);
                    $("#u_feedback").html(counts);
                    //数据需求
                    loadOprationChart(2);
                    $("#d_dataneed").html(counts);
                    //H端医生
                    loadDoctorChart(4);
                    $("#h_doctor").html(counts);
                    //C端医生
                    loadDoctorChart(3);
                    $("#c_doctor").html(counts);
                    //签约医生
                    loadDoctorChart(1);
                    $("#u_signing").html(counts);
                    //医答医生
                    loadDoctorChart(2);
                    $("#d_isanswer").html(counts);
                    //待审核医生
                    loadDoctorChart(5);
                    $("#ht_doctor").html(counts);
                    loadContractChart();
                    loadProductChart();
                    loadreportChart(0);
                    loadaiphotoChart(0);
                } else if (element.code == "opration") {
                    //正式医院
                    loadHospitalChart(0);
                    $("#h_hospital").html(counts);
                    //用户反馈
                    loadOprationChart(2);
                    $("#u_feedback").html(counts);
                    //数据需求
                    loadOprationChart(2);
                    $("#d_dataneed").html(counts);
                    //H端医生
                    loadDoctorChart(4);
                    $("#h_doctor").html(counts);
                    //C端医生
                    loadDoctorChart(3);
                    $("#c_doctor").html(counts);
                    //签约医生
                    loadDoctorChart(1);
                    $("#u_signing").html(counts);
                    //医答医生
                    loadDoctorChart(2);
                    $("#d_isanswer").html(counts);
                    //待审核医生
                    loadDoctorChart(5);
                    $("#ht_doctor").html(counts);
                    loadProductChart();
                    $("#u_product").html(noData);
                    $("#t_product").html(noData);
                } else if (element.code == "sale") {
                    //正式医院
                    loadHospitalChart(0);
                    $("#h_hospital").html(counts);
                    //用户反馈
                    loadOprationChart(2);
                    $("#u_feedback").html(counts);
                    //数据需求
                    loadOprationChart(2);
                    $("#d_dataneed").html(counts);
                    //H端医生
                    loadDoctorChart(4);
                    $("#h_doctor").html(counts);
                    //C端医生
                    loadDoctorChart(3);
                    $("#c_doctor").html(counts);
                    //待审核医生
                    loadDoctorChart(5);
                    $("#ht_doctor").html(counts);
                    //签约医生
                    loadDoctorChart(1);
                    $("#u_signing").html(counts);
                    $("#u_product").html(noData);
                    $("#t_product").html(noData);
                    //医答医生
                    loadDoctorChart(2);
                    $("#d_isanswer").html(counts);
                    loadContractChart();
                    loadProductChart();
                    loadreportChart(0);
                    loadaiphotoChart(0);
                }
                else
                {
                    noPer(noData);
                }
            }
        }
        else
        {
            noPer(noData);
        }
    });
    function noPer(noData)
    {
        $("#h_hospital").html(noData);
        //用户反馈
        $("#u_feedback").html(noData);
        //数据需求
        $("#d_dataneed").html(noData);
        //H端医生
        $("#h_doctor").html(noData);
        //C端医生
        $("#c_doctor").html(noData);
        //签约医生
        $("#u_signing").html(noData);
        //医答医生
        $("#d_isanswer").html(noData);
        //待审核医生
        $("#ht_doctor").html(noData);
        $("#u_product").html(noData);
        $("#t_product").html(noData);
        layer.closeAll('loading');
    }
</script>
</body>
</html>