requirejs.config({ paths: { // vue: "/assets/addons/shopro/libs/vue", g2: "/assets/addons/shopro/libs/antv" } }) define(['jquery', 'bootstrap', 'backend', 'table', 'form', 'g2'], function ($, undefined, Backend, Table, Form, G2) { var Controller = { index: function () { var vueChart = new Vue({ el: "#antv-con", data() { return { chartsData: [], dataList: [{ title: '支付订单', num: 0, checked: true, id: 1, type: 'payOrder', color: '#02C1FF', unit: '笔' }, { title: '支付金额', num: 0, checked: true, id: 5, type: 'payAmount', color: '#7299FF', unit: '元' }, { title: '待发货订单', num: 0, checked: false, id: 2, type: 'noSent', color: '#4BD067', unit: '笔' }, { title: '支付人数', num: 0, checked: false, id: 6, type: 'neworderArr', color: '#9682FF', unit: '人' }, { title: '售后维权', num: 0, checked: false, id: 3, type: 'aftersale', color: '#FFA800', unit: '笔' }, { title: '退款订单', num: 0, checked: false, id: 4, type: 'refund', color: '#FF7D61', unit: '笔' }], selectInputs: [], dropdownList: [{ date: 'yesterday', name: '昨日' }, { date: 'today', name: '今日' }, { date: 'week', name: '近一周' }, { date: 'month', name: '近一月' }, { date: 'year', name: '近一年' }], dropdownName: '今日', dropdownDate: 'today', searchTime: [new Date(), new Date()], ringRightData: [ { item: '微信支付', type: 'wechatPay', count: 0, percent: 0 }, { item: '支付宝支付', type: 'alipayPay', count: 0, percent: 0 }, { item: '钱包支付', type: 'walletPay', count: 0, percent: 0 }, { item: '其他', type: 'otherPay', count: 0, percent: 0 } ], tableData: [], value2: [new Date(), new Date()], //环图总数 allOrderNum: 0, //成交比例 tranPeople: 0, tranPeoplescale: 0, //支付比例 allOrderPayNum: 0, transcale: 0, orderFinish: {}, payedFinish: {}, loading: true } }, mounted() { //请求数据 this.changeTime(); }, methods: { //折线 charts() { $("#main-chart").empty() const chart = new G2.Chart({ container: 'main-chart', autoFit: true, height: 360, animate: true, }); chart.data(this.chartsData); var dataBoxNum = 0 this.selectInputs.forEach(e => { if (e.checked) { dataBoxNum++ } }) if (dataBoxNum == 1) { let title this.selectInputs.forEach(i => { if (i.checked) { title = i.title } }) chart.scale({ date: { alias: ' ', }, y2: { alias: title, min: 0, sync: true, nice: true, }, }); chart .area() .position('date*y2') .color(this.selectInputs[0].color).tooltip(false).shape('smooth'); chart .line() .position('date*y2') .color(this.selectInputs[0].color).shape('smooth'); } else if (dataBoxNum == 2) { chart.scale({ date: { alias: ' ', }, y2: { alias: this.selectInputs[1].title, sync: true, nice: true, min: 0 }, y1: { alias: this.selectInputs[0].title, sync: true, nice: true, min: 0 }, }); chart .area() .position('date*y1') .color(this.selectInputs[0].color).tooltip(false).shape('smooth'); chart .line() .position('date*y1') .color(this.selectInputs[0].color).shape('smooth'); chart .area() .position('date*y2') .color(this.selectInputs[1].color).tooltip(false).shape('smooth'); chart .line() .position('date*y2') .color(this.selectInputs[1].color).shape('smooth'); } else { return false } var margin = 1 / this.chartsData.length; chart.axis('date', { range: [margin / 4, 1 - margin / 4] }); chart.axis('y1', { grid: null, title: {}, }); chart.axis('y2', { title: {}, }); chart.tooltip({ showCrosshairs: true, //展示辅助线 shared: true, }); chart.render(); }, //选择显示数据 selectLine(idx) { this.dataList[idx].checked = !this.dataList[idx].checked if (this.dataList[idx].checked == true) { this.selectInputs.push(this.dataList[idx]); if (this.selectInputs.length > 2) { this.selectInputs[0].checked = false; this.selectInputs.shift(); } } else { this.selectInputs.forEach((item, index) => { if (this.dataList[idx].id == item.id) this.selectInputs.splice(index, 1); }) } this.countOrderData() // this.charts() }, //环图 ringRight() { var that = this; $("#ring-right").empty() const chart = new G2.Chart({ container: 'ring-right', autoFit: true, height: 300, width: 260, padding: [0, 0, 50, 0] }); chart.data(this.ringRightData); chart.scale('percent', { formatter: (val) => { val = val * 100 + '%'; return val; }, }); chart.coordinate('theta', { radius: 0.85, innerRadius: 0.8, }); chart.tooltip({ showTitle: false, showMarkers: false, itemTpl: '
  • {name}: {value}({count})
  • ', }); // 辅助文本 chart .annotation() .text({ position: ['50%', '50%'], content: this.allOrderNum, style: { fontSize: 36, fill: '#753ECD', textAlign: 'center', }, offsetX: -10, offsetY: -20, }) .text({ position: ['50%', '50%'], content: '笔', style: { fontSize: 16, fill: '#753ECD', textAlign: 'center', }, offsetY: -20, offsetX: 30, }) .text({ position: ['50%', '50%'], content: '支付单数', style: { fontSize: 16, fill: '#753ECD', textAlign: 'center', }, offsetY: 20, }); chart .interval() .adjust('stack') .position('percent') .color('item', ['#38C769', '#627EFC', '#FF826C', '#F7B500']) .tooltip('item*percent', (item, percent) => { let counts = Math.round(that.allOrderNum * percent) percent = percent * 100 + '%'; return { name: item, value: percent, count: counts }; }); chart.render(); }, //表格 tableRowClassName({ row, rowIndex }) { if (rowIndex % 2 == 0) { return 'gray-row'; } return ''; }, //选择时间段 changeTime(index = 1) { this.dropdownDate = this.dropdownList[index].date; this.dropdownName = this.dropdownList[index].name; this.searchTime = this.getTimeSlot(); this.getDataInfo(); }, //选择请求数据 getDataInfo() { this.loading = true let that = this let timeSlot = moment(that.searchTime[0]).format("YYYY-MM-DD HH:mm:ss") + ' - ' + moment(that.searchTime[1]).format("YYYY-MM-DD HH:mm:ss"); Fast.api.ajax({ url: 'shopro/dashboard/index', loading: false, data: { datetimerange: timeSlot }, success: function (res, ret) { let data = res.data; that.tableData = data.goodsList; that.orderFinish = data.orderFinish that.payedFinish = data.payedFinish that.dataList.forEach(d => { if (d.type != 'neworderArr') { d.num = data[d.type + 'Num'] d.item = data[d.type + 'Arr'] } else { let resorderArr = JSON.parse(JSON.stringify(data.payOrderArr)); for (var i = 0; i < resorderArr.length; i++) { for (var j = i + 1; j < resorderArr.length; j++) { if (resorderArr[i].user_id == resorderArr[j].user_id) { resorderArr.splice(j, 1); j--; } } } d.num = resorderArr.length d.item = resorderArr } }) that.allOrderNum = data.allTypePay that.ringRightData.forEach(p => { if (p.type != 'otherPay') { p.count = data[p.type] p.percent = that.scaleFunc(data[p.type], data.allTypePay) } else { p.count = data.allTypePay - data.wechatPay - data.alipayPay - data.walletPay p.percent = that.scaleFunc(p.count, data.allTypePay) } }) that.ringRight() //成交比例 that.tranPeople = data.tranPeople that.tranPeoplescale = that.scaleFunc(data.tranPeople, data.orderArr.length) * 100 //支付比例 that.allOrderPayNum = data.payAmountNum that.transcale = that.scaleFunc(data.payAmountNum, data.totalAmount) * 100 //判断是否选中 that.selectInputs = [] that.dataList.forEach((item, index) => { if (item.checked == true) that.selectInputs.push(item); }) // 请求数据 that.countOrderData(); } }) }, countOrderData() { let that = this; let time = ( new Date(moment(that.searchTime[1]).format("YYYY-MM-DD HH:mm:ss").replace(/-/g, "/")).getTime() - new Date(moment(that.searchTime[0]).format("YYYY-MM-DD HH:mm:ss").replace(/-/g, "/")).getTime() ) / 1000 + 1; let kld = ''; let interval = 0; if (time <= 60 * 60) { interval = parseInt(time / 60); kld = 'minutes'; } else if (time <= 60 * 60 * 24) { interval = parseInt(time / (60 * 60)); kld = 'hours'; } else if (time <= 60 * 60 * 24 * 30 * 1.5) { interval = parseInt(time / (60 * 60 * 24)); kld = 'days'; } else if (time < 60 * 60 * 24 * 30 * 24) { interval = parseInt(time / (60 * 60 * 24 * 30)); kld = 'months'; } else if (time >= 60 * 60 * 24 * 30 * 24) { interval = parseInt(time / (60 * 60 * 24 * 30 * 12)); kld = 'years'; } this.drawX(interval, kld); }, drawX(interval, kld) { let that = this let x = []; let selectInputLeng = 0 this.selectInputs.forEach(e => { if (e.checked) { selectInputLeng++ } }) for (let i = 0; i <= interval; i++) { if (kld == 'minutes' || kld == 'hours') { x.push({ date: moment(that.searchTime[0]).add(i, kld).format("DD HH:mm"), timeStamp: moment(that.searchTime[0]).add(i, kld).valueOf(), y2: 0, y1: 0 }); } else if (kld == 'days') { x.push({ date: moment(that.searchTime[0]).add(i, kld).format("YYYY-MM-DD"), timeStamp: moment(that.searchTime[0]).add(i, kld).valueOf(), y2: 0, y1: 0 }); } else if (kld == 'months') { x.push({ date: moment(that.searchTime[0]).add(i, kld).format("YYYY-MM"), timeStamp: moment(that.searchTime[0]).add(i, kld).valueOf(), y2: 0, y1: 0 }); } else { x.push({ date: moment(that.searchTime[0]).add(i, kld).format("YYYY"), timeStamp: moment(that.searchTime[0]).add(i, kld).valueOf(), y2: 0, y1: 0 }); } } if (selectInputLeng == 1) { for (var y = 0; y < x.length; y++) { let y2 = 0 let selectItem = [] let id = 0 this.selectInputs.forEach(element => { if (element.checked == true) { selectItem = element.item id = element.id } }) if (id == 6) { let arr = JSON.parse(JSON.stringify(selectItem)) selectItem.forEach(se => { if (y == x.length - 1) { y2 = x[x.length - 2].y2 } else { if (se.createtime <= x[y + 1].timeStamp) { flag2 = true y2 = 0 arr.forEach(aa => { if (aa.createtime <= se.createtime) { y2++ } }) } } }) } else { selectItem.forEach(se => { if (y != x.length - 1) { if (se.createtime > x[y].timeStamp && se.createtime <= x[y + 1].timeStamp) { y2 += Number(se.counter) } } else { if (se.createtime > x[y].timeStamp) { y2 += Number(se.counter) } } }) } x[y].y2 = y2 } } if (selectInputLeng == 2) { for (var y = 0; y < x.length; y++) { let y1 = 0 let y2 = 0 this.selectInputs.forEach((si, sindex) => { if (si.id == 6) { let arr = JSON.parse(JSON.stringify(si.item)) si.item.forEach(se => { if (y == x.length - 1) { if (sindex == 0) { y1 = x[x.length - 2].y1 } else { y2 = x[x.length - 2].y2 } } else { if (se.createtime <= x[y + 1].timeStamp) { if (sindex == 0) { y1 = 0 arr.forEach(aa => { if (aa.createtime <= se.createtime) { y1++ } }) } else { y2 = 0 arr.forEach(aa => { if (aa.createtime <= se.createtime) { y2++ } }) } } } }) } else { si.item.forEach(se => { if (y != x.length - 1) { if (se.createtime > x[y].timeStamp && se.createtime <= x[y + 1].timeStamp) { if (sindex == 0) { y1 += Number(se.counter) } else { y2 += Number(se.counter) } } } else { if (se.createtime > x[y].timeStamp) { if (sindex == 0) { y1 += Number(se.counter) } else { y2 += Number(se.counter) } } } }) } }) x[y].y1 = y1 x[y].y2 = y2 } } that.chartsData = x that.loading = false that.charts() }, //获取时间 getTimeSlot() { let beginTime = ''; let endTime = moment().format('YYYY-MM-DD'); switch (this.dropdownDate) { case 'yesterday': endTime = moment().subtract(1, 'days').format('YYYY-MM-DD') beginTime = endTime break; case 'today': beginTime = endTime; break; case 'week': beginTime = moment().subtract(1, 'weeks').format('YYYY-MM-DD') break; case 'month': beginTime = moment().subtract(1, 'months').format('YYYY-MM-DD') break; case 'year': beginTime = moment().subtract(1, 'years').format('YYYY-MM-DD') break; } let timeSlot = [beginTime + ' 00:00:00', endTime + ' 23:59:59']; return timeSlot; }, goDetail(id) { let that = this; let status = '' switch (id) { case 1: status = 'payed' break; case 2: status = 'nosend' break; case 3: status = 'aftersale' break; case 4: status = 'refund' break; } let times = encodeURI(that.searchTime.join(" - ")) parent.Fast.api.open("shopro/order/order/index?status=" + status + "&datetimerange=" + times, "查看详情", { callback: function (data) { } }); return false; }, scaleFunc(a, b) { return (a <= 0 ? 0 : a / b).toFixed(2) - 0 } }, }) }, recyclebin: function () { // 初始化表格参数配置 Table.api.init({ extend: { 'dragsort_url': '' } }); var table = $("#table"); // 初始化表格 table.bootstrapTable({ url: 'shopro/decorate/recyclebin' + location.search, pk: 'id', sortName: 'id', columns: [ [ { checkbox: true }, { field: 'id', title: __('Id') }, { field: 'name', title: __('Name'), align: 'left' }, { field: 'deletetime', title: __('Deletetime'), operate: 'RANGE', addclass: 'datetimerange', formatter: Table.api.formatter.datetime }, { field: 'operate', width: '130px', title: __('Operate'), table: table, events: Table.api.events.operate, buttons: [ { name: 'Restore', text: __('Restore'), classname: 'btn btn-xs btn-info btn-ajax btn-restoreit', icon: 'fa fa-rotate-left', url: 'shopro/decorate/restore', refresh: true }, { name: 'Destroy', text: __('Destroy'), classname: 'btn btn-xs btn-danger btn-ajax btn-destroyit', icon: 'fa fa-times', url: 'shopro/decorate/destroy', refresh: true } ], 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; });