v2.tiantianxinye.365care/resources/views/admin/home.blade.php

@extends("admin.layouts.layout")

@php
    $pageTitle = "首页";
@endphp

@push("header")
    <style>
        .content-page {
            height: 100%;
            padding-bottom: 62px;
            overflow-y: scroll;
        }
        .footer {
            background: #fff;
        }
        .toll-free-box i {
            transform: none !important;
            left: 1rem;
            bottom: .4rem;
        }
        .static-container {
            display: flex;
            flex-wrap: wrap;
        }
        .static-container > .card1 {
            margin-bottom: 20px;
        }
        .static-container > .card1 + .card1 {
            margin-left: 20px;
        }
        .static-container > .card1:nth-child(1) {
            flex-basis: 36%;
        }
        .static-container > .card1:nth-child(2) {
            flex-basis: calc(64% - 20px);
        }
        .static-container > .card1:nth-child(3) {
            flex-basis: 68%;
            height: 300px;
            margin-left: 0 !important;
        }
        .static-container > .card1:nth-child(3) .card1-title > div::before {
            display: none;
        }
        .card1 {
            background: #fff;
            border-radius: 4px;
            font-size: 14px;
            box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
            overflow: hidden;
            position: relative;
        }
        .card1::before {
            content: "";
            height: 28px;
            width: 28px;
            border-radius: 100%;
            background: #78d3a9;
            opacity: .25;
            position: absolute;
            bottom: -14px;
            right: 12px;
        }
        .card1::after {
            content: "";
            height: 42px;
            width: 42px;
            border-radius: 100%;
            background: #78d3a9;
            opacity: .25;
            position: absolute;
            bottom: -4px;
            right: -14px;
        }
        .card1-title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #e8eaec;
            padding: 12px 14px;
            line-height: 1;
        }
        .card1-title > div:nth-child(1) {
            color: #333;
            position: relative;
        }
        .card1-title > div:nth-child(1)::before {
            content: '';
            height: 14px;
            width: 140px;
            background: radial-gradient(12px 9px at 10px 40%,#7ed3b155 20%,#0000 70%) 0 0/12px 12px no-repeat,
            radial-gradient(120px 9px at 10px 40%,#7ed3b155 20%,#0000 70%) 12px 0/130px 12px no-repeat;

            position: absolute;
            bottom: -6px;
            left: -6px;
        }
        .card1-title__arrow {
            padding-right: 20px;
            cursor: pointer;
            position: relative;
        }
        .card1-title__arrow::before {
            content: "\F142";
            display: inline-block;
            font-family: 'Material Design Icons';
            text-rendering: auto;
            font-size: 1.1rem;
            -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
        }
        .card1-body {
            padding: 7px;
        }
        .card1-body .static1, .card1-body .static2{
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            margin-top: 20px;
        }
        .static1 .static1__item, .static2 .static2__item{
            margin: 14px;
            padding-left: 20px;
            font-size: 14px;
        }
        .static1 .static1__item .static1__item--label,.static2 .static2__item .static2__item--label {
            color: #666;

            position: relative;
        }
        .static1 .static1__item .static1__item--label::before {
            content: "";
            width: 4px;
            height: 78%;
            background: #73cdb9;
            border-radius: 4px;
            transform: translateY(11%);

            position: absolute;
            left: -10px;
            top: 0;
        }
        .static2 .static2__item--label {
            padding-left: 4px;
        }
        .static2 .static2__item .static2__item--label::before {
            content: "";
            width: 8px;
            height: 8px;
            background: #f2b34e;
            border-radius: 100%;
            transform: translateY(-50%);

            position: absolute;
            left: -10px;
            top: 50%;
        }
        .static2 .static2__item:nth-child(2) .static2__item--label::before {
            background: #548fee;
        }
        .static2 .static2__item:nth-child(3) .static2__item--label::before {
            background: #78d3a9;
        }
        .static1 .static1__item .static1__item--value,.static2 .static2__item .static2__item--value {
            font-weight: 600;
            color: #333;
            line-height: 2;
            font-size: 15px;
        }
        .static2 .static2__item .static2__item--value {
            text-align: center;
        }
        .card1-body:has(#pie-chart) {
            height: calc(100% - 39px);
        }
        #pie-chart {
            height: 100%;
            width: 100%;
        }
        #bar-chart {
            height: 100%;
            width: 100%;
        }

        .type-switch {
            display: flex;
        }
        .type-switch .type-switch__item {
            padding: 0 20px;
            position: relative;
        }
        .type-switch .type-switch__item > input {
            opacity: 0;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }
        .type-switch .type-switch__item:has(input:checked) .text {
            color: #609ff9;
            position: relative;
        }
        .type-switch .type-switch__item:has(input:checked) .text::after {
            content: "";
            width: 100%;
            height: 4px;
            background: #609ff9;
            position: absolute;
            left: 0;
            bottom: -12px;
        }
        .hospital-select:focus {
            outline: none;
        }
        .card1-body:has(#bar-chart) {
            height: calc(100% - 39px);
        }

        .hospital-select {
            padding: 0 6px;
            border: none;
            height: 34px;
            background: #7fd4b0;
            color: #fff;
            width: 150px;
            position: absolute;
            top: 20px;
            right: 12px;
        }
    </style>
@endpush

@section("content")
    @foreach($projects as $project)
    <select class="hospital-select" name="hospital-select">
        <option value="{{$project->id}}">{{$project->name}}</option>
    </select>
    @endforeach

    <div class="static-container">
        <div class="card1">
            <div class="card1-title">
                <div>数据统计</div>
                <div>
{{--                    <span class="card1-title__arrow">更多</span>--}}
                </div>
            </div>
            <div class="card1-body">
                <div class="static1">
                    <div class="static1__item">
                        <div class="static1__item--label">今日应收（元）</div>
                        <div class="static1__item--value">{{$counts['bill_today']}}</div>
                    </div>
                    <div class="static1__item">
                        <div class="static1__item--label">今日退款（元）</div>
                        <div class="static1__item--value">{{$counts['refund_today']}}</div>
                    </div>
                    <div class="static1__item">
                        <div class="static1__item--label">在岗护工</div>
                        <div class="static1__item--value">{{$counts['paramedic_has_order']}}</div>
                    </div>
                    <div class="static1__item">
                        <div class="static1__item--label">订单总数（个）</div>
                        <div class="static1__item--value">{{$counts['orders_all']}}</div>
                    </div>
                    <div class="static1__item">
                        <div class="static1__item--label">护工数量（人）</div>
                        <div class="static1__item--value">{{$counts['paramedics']}}</div>
                    </div>
                    <div class="static1__item">
                        <div class="static1__item--label">日结算</div>
                        <div class="static1__item--value">{{$counts['orders_finished_in_today']}}</div>
                    </div>
                    <div class="static1__item">
                        <div class="static1__item--label">日派工</div>
                        <div class="static1__item--value">{{$counts['orders_ongoing_in_today']}}</div>
                    </div>
                </div>
                <div class="static2">
                    <div class="static2__item">
                        <div class="static2__item--label">待处理</div>
                        <div class="static2__item--value">{{$counts['orders_pending']}}</div>
                    </div>
                    <div class="static2__item">
                        <div class="static2__item--label">在陪患者</div>
                        <div class="static2__item--value">{{$counts['orders_ongoing']}}</div>
                    </div>
                    <div class="static2__item">
                        <div class="static2__item--label">已完成</div>
                        <div class="static2__item--value">{{$counts['orders_finished']}}</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="card1">
            <div class="card1-title">
                <div>各产品占比</div>
                <div>
{{--                    <span class="card1-title__arrow">更多</span>--}}
                </div>
            </div>
            <div class="card1-body">
                <div id="pie-chart"></div>
            </div>
        </div>

        <div class="card1">
            <div class="card1-title">
                <div class="type-switch">
                    <div class="type-switch__item">
                        <input type="radio" name="type-switch" value="1" checked>
                        <div class="text">营收</div>
                    </div>
                    <div class="type-switch__item">
                        <input type="radio" name="type-switch" value="2">
                        <div class="text">订单量</div>
                    </div>
                </div>
{{--                <div class="date-select">--}}
{{--                    <span>今日</span>--}}
{{--                    <span>本周</span>--}}
{{--                    <span>本月</span>--}}
{{--                    <span>全年</span>--}}

{{--                    <select name="date"></select>--}}
{{--                </div>--}}
            </div>
            <div class="card1-body">
                <div id="bar-chart"></div>
            </div>
        </div>
    </div>
@endsection

<script>
    function jump(url){
        window.open(url)
    }

</script>
@push("footer")
    <script src="/plugins/echarts/echarts.min.js"></script>
    <script>
        var lies = {!! json_encode($lies) !!};
        var saleList = {!! json_encode($saleList)  !!};
        var orderList = {!! json_encode($orderList)  !!};
        console.log(lies,saleList,orderList)
        function initPieChart () {
            var datas = lies.map(function (item) {
                return [
                    {
                        name: item.name,
                        value: parseFloat(item.total??"0") * item.rate,
                        label: {
                            show: true,
                            position: 'center',
                            fontWeight: "bold",
                            formatter: function (params) {
                                return params.name + "\n" + (item.rate * 100).toFixed(2) + "%"
                            }
                        }
                    },
                    {
                        name: '未完成',
                        value: parseFloat(item.total??"0") * (1 - item.rate),
                        itemStyle: {
                            color: "#f1f2f5"
                        }
                    }
                ]
            })
            var pieChart = echarts.init(document.querySelector("#pie-chart"));
            var pieColumns = 5; // 每行的饼图数量
            var pieRows = Math.ceil(datas.length / pieColumns); // 计算行数
            var gap = 10; // 间隔为20像素

            var pieWidth = (100 - (pieColumns - 1) * (gap / pieColumns)) / pieColumns;
            var pieHeight = (100 - (pieRows - 1) * (gap / pieRows)) / pieRows;
            var option = {
                series: datas.map(function (data, idx) {
                    var columnIndex = idx % pieColumns; // 当前饼图在其行中的列索引
                    var rowIndex = Math.floor(idx / pieColumns); // 当前饼图的行索引
                    var left = columnIndex * (pieWidth + gap / pieColumns); // 计算left位置
                    var top = rowIndex * (pieHeight + gap / pieRows); // 计算top位置
                    return {
                        type: 'pie',
                        radius: [40, 60],
                        top: top + "%",
                        height: pieHeight + "%",
                        left: left + '%',
                        width: pieWidth + "%",
                        itemStyle: {
                            borderColor: '#fff',
                            borderWidth: 1
                        },
                        label: {
                            normal: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                label: {
                                    show: false,
                                    fontSize: 15,
                                    fontWeight: 'bold',
                                    fontColor: "#666",
                                }
                            },
                        },
                        labelLine: {
                            show: false
                        },
                        data: data
                    };
                })
            };

            // 使用刚指定的配置项和数据显示图表。
            pieChart.setOption(option);
        }
        var barChart
        function initBarChart () {
            barChart = echarts.init(document.querySelector("#bar-chart"));
            var option = {
                title: {
                    text: '销售额趋势'
                },
                tooltip: {},
                legend: {
                    data: ['销量']
                },
                xAxis: {
                    data: saleList.map(function (item) {
                        return item.month
                    })
                },
                yAxis: {},
                series: [
                    {
                        name: '销量',
                        type: 'bar',
                        data: saleList.map(function (item) {
                            return item.total
                        })
                    }
                ]
            }
            barChart.setOption(option)
        }
        function setBarChartOption (type) {
            var option
            if (type == 1) {
                option = {
                    title: {
                        text: '销售额趋势'
                    },
                    tooltip: {},
                    legend: {
                        data: ['销量']
                    },
                    xAxis: {
                        data: saleList.map(function (item) {
                            return item.month
                        })
                    },
                    yAxis: {},
                    series: [
                        {
                            name: '销量',
                            type: 'bar',
                            data: saleList.map(function (item) {
                                return item.total
                            })
                        }
                    ]
                }
                barChart.setOption(option)
            } else {
                option = {
                    title: {
                        text: '订单量趋势'
                    },
                    tooltip: {},
                    legend: {
                        data: ['订单']
                    },
                    xAxis: {
                        data: orderList.map(function (item) {
                            return item.month
                        })
                    },
                    yAxis: {},
                    series: [
                        {
                            name: '订单',
                            type: 'bar',
                            data: orderList.map(function (item) {
                                return item.total
                            })
                        }
                    ]
                }
                barChart.setOption(option)
            }
        }
        function typeSwitchListener () {
            $("[name=type-switch]").change(function () {
                setBarChartOption($(this).val())
            })
        }
        (function () {
            initPieChart()
            initBarChart()
            typeSwitchListener()
        })()
    </script>
@endpush