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

@extends('admin/layout')
@section('content')
    <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>
    <div class="col-sm-9" style="float: inherit">
        {{--<h3>软文数据汇总</h3>--}}

        <div class="ibox-content">
            <div id="bqFlow" style="width: 100%;height: 400px;"></div>
        </div>
    </div>
    <div class="col-sm-9" style="float: inherit">
        <ul class="ul-content">
            <li class="active">
                <table class="my-table">

                    <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">
                    <br>
                    <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>

    </div>

@endsection
@section('footer')
    <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