rainfall.js 4.4 KB
define(['jquery', 'bootstrap', 'backend', 'table', 'form', 'template', 'echarts', 'echarts-theme'], function ($, undefined, Backend, Table, Form, Template, Echarts) {

    var Controller = {
        index: function () {
            //这句话在多选项卡统计表时必须存在,否则会导致影响的图表宽度不正确
            $(document).on("click", ".charts-custom a[data-toggle=\"tab\"]", function () {
                var that = this;
                setTimeout(function () {
                    var id = $(that).attr("href");
                    var chart = Echarts.getInstanceByDom($(id)[0]);
                    chart.resize();
                }, 0);
            });

            // 基于准备好的dom,初始化echarts实例
            var lineChart = Echarts.init(document.getElementById('line-chart'), 'walden');

            // 指定图表的配置项和数据
            var option = option = {
                // title: {
                //     text: 'Stacked Line'
                // },
                tooltip: {
                    trigger: 'axis',
                },
                legend: {
                    data: Config.equipment//['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    name:"日期",
                    type: 'category',
                    boundaryGap: false,
                    data: Config.date //['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    name:"降雨量/mm",
                    type: 'value'
                },
                series: Config.rainfall_series
            };

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

            // 初始化表格参数配置
            Table.api.init({
                extend: {
                    index_url: 'reservoir/rain/rainfall/index' + location.search,
                    add_url: 'reservoir/rain/rainfall/add',
                    edit_url: 'reservoir/rain/rainfall/edit',
                    del_url: 'reservoir/rain/rainfall/del',
                    multi_url: 'reservoir/rain/rainfall/multi',
                    import_url: 'reservoir/rain/rainfall/import',
                    table: 'reservoir_rain_rainfall',
                }
            });

            var table = $("#table");

            // 初始化表格
            table.bootstrapTable({
                url: $.fn.bootstrapTable.defaults.extend.index_url,
                pk: 'id',
                sortName: 'createtime',
                columns: [
                    [
                        {checkbox: true},
                        {field: 'id', title: __('Id')},
                        {field: 'number', title: __('Number'), operate: 'LIKE'},
                        {field: 'equipment.name', title: __('设备名称'), operate: false},
                        {field: 'status', title: __('Status'), searchList: {"0":__('Status 0'),"1":__('Status 1')}, formatter: Table.api.formatter.status},
                        {field: 'rainfall', title: __('Rainfall'), operate:'BETWEEN'},
                        {field: 'total_rainfall', title: __('TotalRainfall'), operate:'BETWEEN'},

                        {field: 'reservoirlist.name', title: __('Reservoirlist.name'), operate: 'LIKE'},
                        {field: 'createtime', title: __('Createtime'), operate:'RANGE', addclass:'datetimerange', autocomplete:false, formatter: Table.api.formatter.datetime},
                        {field: 'operate', title: __('Operate'), table: table, events: Table.api.events.operate, formatter: Table.api.formatter.operate}
                    ]
                ]
            });

            // 为表格绑定事件
            Table.api.bindevent(table);
        },
        add: function () {
            Controller.api.bindevent();
        },
        edit: function () {
            Controller.api.bindevent();
        },
        api: {
            bindevent: function () {
                Form.api.bindevent($("form[role=form]"));
            }
        }
    };
    return Controller;
});