test/resources/views/admin/article/articles_overview.blade.php

@extends('admin/site/side_layout')
@section('header_extend')
    <style>
        .ul-content {
            margin: 0;
            padding: 0;
            list-style-type: none;
        }

        .ul-content li {
            padding: 20px 10px 10px;
            display: none;
        }

        .ul-content .active {
            display: block;
        }

        .my-input {
            padding: 4px 2px;
            width: 100%;
        }

        .my-table {
            width: 100%;
        }

        .my-table td {
            border: 1px solid #E5E6E7;
            padding: 8px;
        }

        .my-table tr td:last-child {
            cursor: pointer;
            text-align: center;
        }

        .you-table {
            width: 100%;
        }

        .you-table td {
            padding: 8px;
        }

        .you-table tr td:last-child {
            width: 80px;
            cursor: pointer;
            text-align: center;
        }

        .you-table2 {
            width: 100%;
        }

        .you-table2 td {
            padding: 8px;
        }

        .you-table2 tr td:last-child {
            width: 180px;
        }

        .subInput {
            box-sizing: border-box;
            width: 92%;
            border: 1px dashed #999;
            padding: 4px 2px;
            margin-right: 5px;
        }

    </style>

@endsection

@section('right')
    <div class="col-sm-10" style="float: inherit">
        <div class="ibox-content">
            <div id="bqFlow" style="width: 100%;height: 400px;"></div>
        </div>
    </div>
    <ul class="ul-content">
        <li class="active">
            <table class="my-table">
                {{--<caption style="font-size: 20px;font-weight: 600">文章要求备注</caption>--}}
                <h3>文章要求备注</h3>
                <thead>
                <tr>
                    <td>
                        内容
                    </td>
                    <td onclick="utils.addOptimizeDataScope(1)" style="width: 140px">
                        添加
                    </td>
                </tr>
                </thead>
                <tbody id="optimizeDataScopeBody1">
                @foreach($result['optimizeDataScopeList1'] as $item)
                    <tr>
                        <td>
                            <input style="border-style: none" type="text" value="{{$item}}" class="my-input"
                                   name="optimizeDataScopeText">
                        </td>
                        <td>
                            {{--  <a href="javascript:;" onclick="utils.addTo('{{$item}}')"
                                 style="padding-right: 20px">追加</a>--}}
                            <a href="javascript:;" onclick="utils.delOptimizeDataScope(this)">删除</a>
                        </td>
                    </tr>
                @endforeach
                </tbody>
            </table>


            <table class="my-table">
                {{--<caption style="font-size: 20px;font-weight: 600">参考网站（中文网/同行/行业网站）</caption>--}}
                <h3>参考网站</h3>
                <thead>
                <tr>
                    <td>
                        内容 (中文网/同行/行业网站/公众号)
                    </td>
                    <td onclick="utils.addOptimizeDataScope(2)" style="width: 140px">
                        添加
                    </td>
                </tr>
                </thead>
                <tbody id="optimizeDataScopeBody2">
                @foreach($result['optimizeDataScopeList2'] as $item)
                    <tr>
                        <td>
                            <input style="border-style: none" type="text" value="{{$item}}" class="my-input"
                                   name="optimizeDataScopeText">
                        </td>
                        <td>
                            {{--      <a href="javascript:;" onclick="utils.addTo('{{$item}}')"
                                     style="padding-right: 20px">追加</a>--}}
                            <a href="javascript:;" onclick="utils.delOptimizeDataScope(this)">删除</a>
                        </td>
                    </tr>
                @endforeach
                </tbody>
            </table>

            <button type="button" class="btn btn-success" style="margin: 10px 0"
                    onclick="utils.saveOptimizeDataScope()">保存
            </button>
        </li>
    </ul>


@endsection

@section('footer_extend')
    <script src="{{asset('js/plugins/layDate-v5.0.9/laydate/laydate.js')}}"></script>
    <script src="{{asset('js/plugins/echarts/echarts.min.js')}}"></script>
    <script src="{{asset('js/plugins/wonderland/wonderland.js')}}"></script>
    <script>

        var utils = {
            addTo: function (text = '') {
                utils.addHtml(text);
            },
            addHtml: function (text) {
                var str = '<tr>' +
                    '<td><input type="text" class="my-input" value="' + text + '"></td>' +
                    '<td class="you-del">删除</td>' +
                    '</tr>';
                $(".you-table tbody").append(str);
            },
            delOptimizeDataScope: function (_this) {
                $(_this).parent().parent().remove();
            },
            saveOptimizeDataScope: function () {
                var dataList1 = [];
                $("#optimizeDataScopeBody1").find("[name=optimizeDataScopeText]").each(function () {
                    var val = $(this).val();
                    if (val.length > 0) {
                        dataList1.push(val)
                    }
                });
                var dataList2 = [];
                $("#optimizeDataScopeBody2").find("[name=optimizeDataScopeText]").each(function () {
                    var val = $(this).val();
                    if (val.length > 0) {
                        dataList2.push(val)
                    }
                });
                var ajaxConfig = {
                    url: '/admin/articles/article-overview-update/{{$siteId}}',
                    type: 'post',
                    data: {
                        dataList1: dataList1,
                        dataList2: dataList2,
                    },
                    success: function (result) {
                        layer.msg(result.message, {icon: 6, time: 1000}, function () {
                            window.location.reload();
                        });
                    }
                };
                tips.ajax(ajaxConfig);
            },
            addOptimizeDataScope: function (id) {
                var str = '<tr>' +
                    '<td>' +
                    '<input style="border-style: none" type="text" value=""  class="my-input" name="optimizeDataScopeText">' +
                    '</td>' +
                    '<td>' +
                    /*'<a href="javascript:;" onclick="utils.addTo()" style="padding-right: 20px">追加</a>' +*/
                    '<a href="javascript:;" onclick="utils.delOptimizeDataScope(this)">删除</a>' +
                    '</td>' +
                    '</tr>';
                $("#optimizeDataScopeBody" + id).append(str);
            },
        };

        var bqFlowChart = echarts.init(document.getElementById('bqFlow'), 'wonderland');
        var bqFlowOption = {

            title: {
                text: '软文数据汇总'
            },
            tooltip: {

            },
            legend: {
                data: ['软文']
            },
            xAxis: {
                data: JSON.parse('{!!json_encode($data['xAxis'])!!}'),

                axisLabel: {
                    interval: 0,    //强制文字产生间隔
                    rotate: 20     //文字逆时针旋转45°
                }
            },
            yAxis: {},
            series: [{
                name: '篇幅',
                type: 'bar',
                data: JSON.parse('{!!json_encode($data['yAxis'])!!}'),
                itemStyle: {
                    normal: {
                        label: {
                            show: true,		//开启显示
                            position: 'top',	//在上方显示
                        }
                    }
                }

            }]
        };
        bqFlowChart.setOption(bqFlowOption);
    </script>
@endsection