erp/Web/ECharts/CustomerGather.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage/ErpView.master" AutoEventWireup="true" CodeFile="CustomerGather.aspx.cs" Inherits="ECharts_CustomerGather" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
    <script src="https://cdn.bootcss.com/echarts/3.7.1/echarts.min.js"></script>
    <script type="text/javascript" >

        var weekAddTag = 0;
        var monthAddTag = 0;
        var _startTime = "";
        var _endTime = "";

        var optionPie = {
            title: {
                text: '老客户占比',
                subtext: '',
                x: 'center'
            },
            color: ['#4169E1',"#D2691E"],
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['老客户', '新客户' ]
            },
            series: [
                {
                    name: '客户占比',
                    type: 'pie',
                    radius: '65%',
                    center: ['50%', '50%'],
                    data: [
                        { value: 335, name: '新客户' },
                        { value: 310, name: '老客户' }
                    ],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };


        function setPieData() {
            var shopName = mini.get("txtSearchShop").getText();
            var isOld = mini.get("txtSearchOldCus").getValue();
            var parms = new Object();
            parms.date1 = _startTime;
            parms.date2 = _endTime;
            parms.seller_nick = shopName;
            parms.isOld = isOld;
            postAjax("get_old_customer_per", parms, function (data) {
                var pieOp = optionPie;
                var oldCus = data.old;
                var totalCus = data.total;
                var newCus = parseInt(totalCus) - parseInt(oldCus);
                var pData = [
                    { value: oldCus, name: '老客户' },
                    { value: newCus, name: '新客户' }
                ];
                pieOp.series[0].data = pData;
                var chartPie = echarts.init(document.getElementById('chartPie'));
                chartPie.setOption(pieOp);
                $("#id_des_old").html(oldCus);
                $("#id_des_new").html(newCus);
                $("#id_des_total").html(totalCus);
            });
        }

        //查询按钮
        function searchFn() {
            var shopName = mini.get("txtSearchShop").getText();
            var isOld = mini.get("txtSearchOldCus").getValue();
            _startTime = mini.get("txtChartDate1").getText();
            _endTime = mini.get("txtChartDate2").getText();
            grid.load({
                date1: _startTime, date2: _endTime, seller_nick: shopName, isOld:isOld
            });

            setPieData();
        }


        function clickPreNextDate(btnType) {
            var dateList = "";
            if (btnType == 1) {
                monthAddTag = monthAddTag - 1;
                dateList = getMonthStartAndEnd(monthAddTag);
            }
            else if (btnType == 2) {
                weekAddTag = weekAddTag - 1;
                dateList = getWeekStartAndEnd(weekAddTag);
            }
            else if (btnType == 3) {
                weekAddTag = weekAddTag + 1;
                dateList = getWeekStartAndEnd(weekAddTag);
            }
            else if (btnType == 4) {
                monthAddTag = monthAddTag + 1;
                dateList = getMonthStartAndEnd(monthAddTag);
            }
            _startTime = dateList[0];
            _endTime = dateList[1];
            mini.get("txtChartDate1").setValue(_startTime);
            mini.get("txtChartDate2").setValue(_endTime);
            
        }

        //清除查询内容
        function clearFn() {
            //$("#ctl00_f_all").find("input").val("");
            var form = new mini.Form("#ctl00_f_all");
            form.clear();

            mini.get("aSearchMonth").setChecked(false);
            mini.get("aSearchDay").setChecked(false);
            mini.get("aSearchWeek").setChecked(false);
        }

        function isOldCustomerRenderer(e) {
            var record = e.record;
            var rowIndex = e.rowIndex;
            var html = "<div style=\"display:flex;flex-direction:column;\">";
            if (record.IsOldCustomer == 1) {
                html += ("<div style=\"color:green;\">是</div>");
            }
            else {
                html += ("<div>否</div>");
            }
            html += "</div>";
            return html;
  

        }

        function actionRenderer(e) {
            var record = e.record;
            var pname = record.buyer_nick;
            var html = "";
            html += getGridBtn("edit", "客户资料", "getCustomer('" + pname + "')");
            return html;
        }

        function getCustomer(buyer_nick) {
            postAjax("get_customer_info", "buyer_nick=" + buyer_nick, function (data) {
                console.log("xxxxxxxxxxxx", data);
                if (data.length <= 0) {
                    alert("暂无客户资料");
                    return;
                }
                var uData = data[0];
                mini.get("cusinfo_win").show();
                $("#id_cus_ww").html(uData.buyer_nick);
                $("#id_cus_buycount").html(uData.buy_count);
                $("#id_cus_buyday").html(uData.buy_day+"天");
                $("#id_cus_buytime").html(uData.lastbuy_time);
                $("#id_cus_buyctid").html(uData.lastTid);
                $("#id_cus_totalpayment").html(uData.total_fee);
                $("#id_cus_sellernick").html(uData.seller_nick);
            });

        }



        //function chartsFn(pname) {
        //    mini.get("charts_win").show();
        //    var parms = new Object();
        //    parms.ProductName = pname;
        //    postAjax("get_report_product_month_count", parms, function (data) {
        //        console.log("xxxxxxxxxxxx", data);
        //        var barOp = optionBar;
        //        var tData = [];
        //        var vData = [];
        //        for (var idt of data) {
        //            vData.push(idt.count);
        //            tData.push(idt.ctime);
        //        }

        //        barOp.xAxis[0].data = tData;
        //        barOp.series[0].data = vData;
        //        var chartBar = echarts.init(document.getElementById('chartBar'));
        //        chartBar.setOption(barOp);
        //    });
            
        //}

        $(function () {
            var dateList = getMonthStartAndEnd(0);
            _startTime = dateList[0];
            _endTime = dateList[1];
            //mini.get("txtChartDate1").setValue(_startTime);
            //mini.get("txtChartDate2").setValue(_endTime);
            grid.load({
                date1: _startTime, date2: _endTime
            });
            setPieData();
        });
    </script>        
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="btn" runat="Server">
    <div class="filter_item" id="f_chart_ime">

        <label>店铺</label>
        <input id="txtSearchShop" name="shop" shownullitem="true" allowInput="true" class="mini-combobox inp_middle" url="../handler/sync.ashx?t=get_sel_pen_shop" value="" textfield="name" valuefield="name" />
        <label>老客户</label>
        <select class="mini-combobox inp_middle" name="isoldcus" id="txtSearchOldCus"><option value="">全部</option><option value="1">老客户</option><option value="0">非老客户</option></select>
        <a class="mini-button" style="background-color:#ECF6ED;color:#088615;border:1px solid #66E873;" iconCls="icon-upload" onclick="clickPreNextDate(1)">上一月</a>
        <a class="mini-button" style="background-color:#F3F7F7;color:#16AAF7;border:1px solid #90D3F6;" iconCls="icon-upload" onclick="clickPreNextDate(2)">上一周</a>
        <input id="txtChartDate1" name="date1" class="mini-datepicker inp-time" />
        <span class="sp">-</span>
        <input id="txtChartDate2" name="date2" class="mini-datepicker inp-time" />
        <a class="mini-button" style="background-color:#F3F7F7;color:#16AAF7;border:1px solid #90D3F6;" iconCls="icon-download" onclick="clickPreNextDate(3)">下一周</a>
        <a class="mini-button" style="background-color:#ECF6ED;color:#088615;border:1px solid #66E873;"  iconCls="icon-download" onclick="clickPreNextDate(4)">下一月</a>
        <a class="mini-button mini-button-info btn" iconcls="icon-search" onclick="searchFn()">查询</a>
        
    </div>
</asp:Content>

<asp:Content ID="Content4" ContentPlaceHolderID="content" runat="Server">
    <div id="content" style="width: 100%; display: flex; flex-direction: row; margin-top:20px;">
        <div class="ct" id="chartPie" style="height: 360px; width: 45%;"></div>
        <div style="margin-top:50px;">
            <table class="win_tb" border="0" cellpadding="0" cellspacing="1">
                <tr>
                    <td class="td1" style="width:100px;">老客户</td>
                    <td class="td2" colspan="2">
                        <div id="id_des_old" style="width:200px;font-size:24px;font-weight:bold;"></div>
                    </td>
                </tr>
                <tr>
                    <td class="td1" style="width:100px;">新客户</td>
                    <td class="td2" colspan="2">
                        <div id="id_des_new" style="width:200px;font-size:24px;font-weight:bold;"></div>
                    </td>
                </tr>
                <tr>
                    <td class="td1" style="width:100px;">总客户</td>
                    <td class="td2" colspan="2">
                        <div id="id_des_total" style="width:200px;font-size:24px;font-weight:bold;"></div>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <div class="mini-fit">
        <div id="m_grid" class="mini-datagrid" showpager="true" showemptytext="true" emptytext="暂无记录" url="../handler/sync.ashx?t=get_report_customer_order">
            <div property="columns">
                <div type="indexcolumn" width="20"></div>
                <div type="checkcolumn" width="20"></div>
                <div field="buyer_nick" width="50" align="center" headeralign="center">旺旺</div>
                <div field="seller_nick" width="40" align="center" headeralign="center">店铺</div>
                <div field="pay_time" width="40" align="center" dateFormat="yyyy-MM-dd HH:mm" headeralign="center">时间</div>
                <div field="seller_memo" width="150" align="center" headeralign="center">备注</div>
                <div field="payment" width="20" align="center" headeralign="center">单笔金额</div>
                <div field="IsOldCustomer" width="20" align="center" headeralign="center" renderer="isOldCustomerRenderer">是否老客户</div>
                <div name="action" width="40" headeralign="center" align="center" renderer="actionRenderer" cellstyle="padding:0;">#</div>
            </div>
        </div>
    </div>



    <div id="cusinfo_win" class="mini-window" title="客户档案" style="width: 850px; height: 300px; position: relative; display: none">
        <table class="win_tb" border="0" cellpadding="0" cellspacing="1">
            <tr>
                <td class="td1">旺旺</td>
                <td class="td2" colspan="3">
                    <div id="id_cus_ww" style="font-size:24px;font-weight:bold;"></div>
                </td>
            </tr>
           <tr>
               <td class="td1">消费总金额</td>
                <td class="td2">
                    <div id="id_cus_totalpayment" style="font-weight:bold;"></div>
                </td>
                <td class="td1">购买次数</td>
                <td class="td2">
                    <div id="id_cus_buycount"></div>
                </td>
               
            </tr>
            <tr>
                <td class="td1">最近购买</td>
                <td class="td2">
                    <div id="id_cus_buytime"></div>
                </td>
               <td class="td1">最近单号</td>
                <td class="td2">
                    <div id="id_cus_buyctid"></div>
                </td>
            </tr>
            <tr>
                
               <td class="td1">购买店铺</td>
                <td class="td2">
                    <div id="id_cus_sellernick"></div>
                </td>
                <td class="td1">回购周期</td>
                <td class="td2">
                    <div id="id_cus_buyday"></div>
                </td>
            </tr>
        </table>
    </div>
</asp:Content>