| 1 |
- {"remainingRequest":"D:\\front\\item\\zyAdmin\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\front\\item\\zyAdmin\\src\\pages\\statistic\\transaction\\components\\transaction.vue?vue&type=style&index=0&id=12ffbcd9&scoped=true&lang=scss","dependencies":[{"path":"D:\\front\\item\\zyAdmin\\src\\pages\\statistic\\transaction\\components\\transaction.vue","mtime":1761614939065},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\css-loader\\index.js","mtime":1761614929364},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\vue-loader\\lib\\loaders\\stylePostLoader.js","mtime":1761614937403},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\postcss-loader\\src\\index.js","mtime":1761614935133},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\sass-loader\\dist\\cjs.js","mtime":1761614936391},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1761614927801},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\vue-loader\\lib\\index.js","mtime":1761614937402}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:DQoub25lIHsNCiAgYmFja2dyb3VuZDogdmFyKC0tcHJldi1jb2xvci1wcmltYXJ5KTsNCn0NCi50d28gew0KICBiYWNrZ3JvdW5kOiAjMDBjMDUwOw0KfQ0KLnRocmVlIHsNCiAgYmFja2dyb3VuZDogI2ZmYWIyYjsNCn0NCi5mb3VyIHsNCiAgYmFja2dyb3VuZDogI2IzN2ZlYjsNCn0NCi51cCwNCi5lbC1pY29uLWNhcmV0LXRvcCB7DQogIGNvbG9yOiAjZjUyMjJkOw0KICBmb250LXNpemU6IDEycHg7DQogIG9wYWNpdHk6IDEgIWltcG9ydGFudDsNCn0NCg0KLmRvd24sDQouZWwtaWNvbi1jYXJldC1ib3R0b20gew0KICBjb2xvcjogIzM5YzE1YjsNCiAgZm9udC1zaXplOiAxMnB4Ow0KfQ0KLmN1clAgew0KICBjdXJzb3I6IHBvaW50ZXI7DQp9DQouaGVhZGVyIHsNCiAgJi10aXRsZSB7DQogICAgZm9udC1zaXplOiAxNnB4Ow0KICAgIGNvbG9yOiByZ2JhKDAsIDAsIDAsIDAuODUpOw0KICB9DQogICYtdGltZSB7DQogICAgZm9udC1zaXplOiAxMnB4Ow0KICAgIGNvbG9yOiAjMDAwMDAwOw0KICAgIG9wYWNpdHk6IDAuNDU7DQogIH0NCn0NCg0KLmljb25mb250IHsNCiAgZm9udC1zaXplOiAxNnB4Ow0KICBjb2xvcjogI2ZmZjsNCn0NCg0KLmljb25Dcmwgew0KICB3aWR0aDogMzJweDsNCiAgaGVpZ2h0OiAzMnB4Ow0KICBib3JkZXItcmFkaXVzOiA1MCU7DQogIHRleHQtYWxpZ246IGNlbnRlcjsNCiAgbGluZS1oZWlnaHQ6IDMycHg7DQogIG9wYWNpdHk6IDAuNzsNCn0NCg0KLmxhbiB7DQogIGJhY2tncm91bmQ6IHZhcigtLXByZXYtY29sb3ItcHJpbWFyeSk7DQp9DQoNCi5pY29uc2hhbmdwaW5saXVsYW5saWFuZyB7DQogIGNvbG9yOiAjZmZmOw0KfQ0KDQouaW5mb0JveCB7DQogIHdpZHRoOiAyMCU7DQogIEBtZWRpYSBzY3JlZW4gYW5kIChtYXgtd2lkdGg6IDEzMDBweCkgew0KICAgIHdpZHRoOiAyNSU7DQogIH0NCiAgQG1lZGlhIHNjcmVlbiBhbmQgKG1heC13aWR0aDogMTIwMHB4KSB7DQogICAgd2lkdGg6IDMzJTsNCiAgfQ0KICBAbWVkaWEgc2NyZWVuIGFuZCAobWF4LXdpZHRoOiA5MDBweCkgew0KICAgIHdpZHRoOiA1MCU7DQogIH0NCn0NCg0KLmluZm8gew0KICAuc3AxIHsNCiAgICBjb2xvcjogIzY2NjsNCiAgICBmb250LXNpemU6IDE0cHg7DQogICAgZGlzcGxheTogYmxvY2s7DQogIH0NCiAgLnNwMiB7DQogICAgZm9udC13ZWlnaHQ6IDQwMDsNCiAgICBmb250LXNpemU6IDMwcHg7DQogICAgY29sb3I6IHJnYmEoMCwgMCwgMCwgMC44NSk7DQogICAgZGlzcGxheTogYmxvY2s7DQogIH0NCiAgLnNwMyB7DQogICAgZm9udC1zaXplOiAxMnB4Ow0KICAgIGZvbnQtd2VpZ2h0OiA0MDA7DQogICAgY29sb3I6IHJnYmEoMCwgMCwgMCwgMC40NSk7DQogICAgZGlzcGxheTogYmxvY2s7DQogIH0NCn0NCg=="},{"version":3,"sources":["transaction.vue"],"names":[],"mappings":";AAgWA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"transaction.vue","sourceRoot":"src/pages/statistic/transaction/components","sourcesContent":["<template>\r\n <el-card :bordered=\"false\" shadow=\"never\" class=\"ivu-mt-16\" v-loading=\"spinShow\">\r\n <div class=\"acea-row row-between-wrapper mb20\">\r\n <div class=\"statics-header-title\">\r\n <h4>交易概况</h4>\r\n <el-tooltip placement=\"right-start\">\r\n <i class=\"el-icon-question ml10\"></i>\r\n <div slot=\"content\">\r\n <div>营业额</div>\r\n <div>商品支付金额、充值金额、购买付费会员金额、线下收银金额</div>\r\n <br />\r\n <div>商品支付金额</div>\r\n <div>\r\n 选定条件下，用户购买商品的实际支付金额，包括微信支付、余额支付、支付宝支付、线下支付金额（拼团商品在成团之后计入，线下支付订单在后台确认支付后计入）\r\n </div>\r\n <br />\r\n <div>购买会员金额</div>\r\n <div>选定条件下，用户成功购买付费会员的金额</div>\r\n <br />\r\n <div>充值金额</div>\r\n <div>选定条件下，用户成功充值的金额</div>\r\n <br />\r\n <div>线下收银金额</div>\r\n <div>选定条件下，用户在线下扫码支付的金额</div>\r\n <br />\r\n <div>支出金额</div>\r\n <div>余额支付金额、支付佣金金额、商品退款金额</div>\r\n <br />\r\n <div>余额支付金额</div>\r\n <div>用户下单时使用余额实际支付的金额</div>\r\n <br />\r\n <div>佣金支付金额</div>\r\n <div>后台给推广员支付的推广佣金，以实际支付为准</div>\r\n <br />\r\n <div>商品退款金额</div>\r\n <div>用户成功退款的商品金额</div>\r\n </div>\r\n </el-tooltip>\r\n </div>\r\n <div class=\"acea-row\">\r\n <el-date-picker\r\n clearable\r\n v-model=\"timeVal\"\r\n type=\"daterange\"\r\n :editable=\"false\"\r\n @change=\"onchangeTime\"\r\n format=\"yyyy/MM/dd\"\r\n value-format=\"yyyy/MM/dd\"\r\n start-placeholder=\"开始日期\"\r\n end-placeholder=\"结束日期\"\r\n :picker-options=\"pickerOptions\"\r\n style=\"width: 250px\"\r\n class=\"mr20\"\r\n ></el-date-picker>\r\n <el-button type=\"primary\" v-db-click @click=\"onSeach\">查询</el-button>\r\n <el-button type=\"primary\" v-db-click @click=\"excel\">导出</el-button>\r\n </div>\r\n </div>\r\n <div class=\"acea-row mb20\">\r\n <div class=\"infoBox acea-row mb30\" v-for=\"(item, index) in list\" :key=\"index\">\r\n <div\r\n class=\"iconCrl mr15\"\r\n :class=\"{\r\n one: index % 4 == 0,\r\n two: index % 4 == 1,\r\n three: index % 4 == 2,\r\n four: index % 4 == 3,\r\n }\"\r\n >\r\n <i class=\"iconfont\" :class=\"item.icon\"></i>\r\n </div>\r\n <div class=\"info\">\r\n <span class=\"sp1\" v-text=\"item.name\"></span>\r\n <span\r\n class=\"sp2\"\r\n v-if=\"index === list.length - 1\"\r\n v-text=\"item.money ? (parseInt(item.money * 100) / 100).toFixed(2) : '0.00'\"\r\n ></span>\r\n <span class=\"sp2\" v-else v-text=\"item.money ? item.money : '0.00'\"></span>\r\n <span class=\"content-time spBlock\"\r\n >环比增长：<i class=\"content-is\" :class=\"Number(item.rate) >= 0 ? 'up' : 'down'\">{{ item.rate }}%</i\r\n ><i\r\n :style=\"{ color: Number(item.rate) >= 0 ? '#F5222D' : '#39C15B' }\"\r\n :class=\"[Number(item.rate) >= 0 ? 'el-icon-caret-top' : 'el-icon-caret-bottom']\"\r\n /></span>\r\n </div>\r\n </div>\r\n </div>\r\n <echarts-new :option-data=\"optionData\" :styles=\"style\" height=\"100%\" width=\"100%\" v-if=\"optionData\"></echarts-new>\r\n </el-card>\r\n</template>\r\n\r\n<script>\r\nimport { statisticBottomTradeApi, statisticTrendApi } from '@/api/statistic';\r\nimport echartsNew from '@/components/echartsNew/index';\r\nimport { formatDate } from '@/utils/validate';\r\nexport default {\r\n name: 'transaction',\r\n components: {\r\n echartsNew,\r\n },\r\n data() {\r\n return {\r\n grid: {\r\n xl: 8,\r\n lg: 8,\r\n md: 8,\r\n sm: 24,\r\n xs: 24,\r\n },\r\n pickerOptions: this.$timeOptions,\r\n name: '近30天',\r\n timeVal: [],\r\n dataTime: '',\r\n list: {},\r\n optionData: {},\r\n style: { height: '400px' },\r\n getExcel: '',\r\n spinShow: false,\r\n };\r\n },\r\n created() {\r\n const end = new Date();\r\n const start = new Date();\r\n start.setTime(start.setTime(new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() - 29)));\r\n this.timeVal = [start, end];\r\n this.dataTime = formatDate(start, 'yyyy/MM/dd') + '-' + formatDate(end, 'yyyy/MM/dd');\r\n },\r\n mounted() {\r\n this.getStatistics();\r\n },\r\n methods: {\r\n onSeach() {\r\n this.getStatistics();\r\n },\r\n // 具体日期\r\n onchangeTime(e) {\r\n this.timeVal = e;\r\n this.dataTime = this.timeVal ? this.timeVal.join('-') : '';\r\n this.name = this.dataTime;\r\n },\r\n // 统计\r\n getStatistics() {\r\n this.spinShow = true;\r\n statisticBottomTradeApi({ data: this.dataTime })\r\n .then(async (res) => {\r\n const cardLists = res.data;\r\n const incons = [\r\n 'iconyingyee',\r\n 'iconjiaoyijine',\r\n 'iconshangpinzhifujine',\r\n 'icongoumaihuiyuanjine',\r\n 'iconchongzhijianshu',\r\n 'iconxianxiashouyinjine',\r\n 'iconzhichujine',\r\n 'iconyuezhifujine',\r\n 'iconzhifuyongjinjine',\r\n 'iconshangpintuikuanjine',\r\n ];\r\n for (var i = 0; i < cardLists.series.length; i++) {\r\n this.$set(cardLists.series[i], 'icon', incons[i]);\r\n }\r\n this.list = cardLists.series;\r\n this.getExcel = cardLists.export;\r\n this.get(cardLists);\r\n this.spinShow = false;\r\n })\r\n .catch((res) => {\r\n this.$message.error(res.msg);\r\n this.spinShow = false;\r\n });\r\n },\r\n get(extract) {\r\n let dataList = extract.series.filter((item) => {\r\n return item.type === 1;\r\n });\r\n let legend = dataList.map((item) => {\r\n return item.name;\r\n });\r\n let col = ['#5B8FF9', '#5AD8A6', '#5D7092', '#F5222D', '#FFAB2B', '#B37FEB'];\r\n let seriesData = [];\r\n dataList.map((item, index) => {\r\n let series = [];\r\n Object.keys(item.value).forEach((key) => {\r\n series.push(Number(item.value[key]));\r\n });\r\n seriesData.push({\r\n name: item.name,\r\n type: 'line',\r\n data: series,\r\n itemStyle: {\r\n normal: {\r\n color: col[index],\r\n },\r\n },\r\n smooth: true,\r\n });\r\n });\r\n this.optionData = {\r\n tooltip: {\r\n trigger: 'axis',\r\n axisPointer: {\r\n type: 'cross',\r\n label: {\r\n backgroundColor: '#6a7985',\r\n },\r\n },\r\n },\r\n legend: {\r\n x: 'center',\r\n data: legend,\r\n },\r\n grid: {\r\n left: '3%',\r\n right: '4%',\r\n bottom: '3%',\r\n containLabel: true,\r\n },\r\n toolbox: {\r\n feature: {\r\n saveAsImage: {},\r\n },\r\n },\r\n xAxis: {\r\n type: 'category',\r\n boundaryGap: true,\r\n axisLabel: {\r\n interval: 0,\r\n rotate: 40,\r\n textStyle: {\r\n color: '#000000',\r\n },\r\n },\r\n data: extract.x,\r\n },\r\n yAxis: {\r\n type: 'value',\r\n axisLine: {\r\n show: false,\r\n },\r\n axisTick: {\r\n show: false,\r\n },\r\n axisLabel: {\r\n textStyle: {\r\n color: '#7F8B9C',\r\n },\r\n },\r\n splitLine: {\r\n show: true,\r\n lineStyle: {\r\n color: '#F5F7F9',\r\n },\r\n },\r\n },\r\n series: seriesData,\r\n };\r\n },\r\n excel() {\r\n window.location.href = this.getExcel;\r\n },\r\n // 统计图\r\n getTrend() {\r\n statisticTrendApi({ data: this.dataTime })\r\n .then(async (res) => {\r\n let legend = res.data.series.map((item) => {\r\n return item.name;\r\n });\r\n let xAxis = res.data.xAxis;\r\n let col = ['#5B8FF9', '#5AD8A6', '#5D7092', '#5D7092'];\r\n let series = [];\r\n res.data.series.map((item, index) => {\r\n series.push({\r\n name: item.name,\r\n type: 'line',\r\n data: item.value,\r\n itemStyle: {\r\n normal: {\r\n color: col[index],\r\n },\r\n },\r\n });\r\n });\r\n this.optionData = {\r\n tooltip: {\r\n trigger: 'axis',\r\n axisPointer: {\r\n type: 'cross',\r\n label: {\r\n backgroundColor: '#6a7985',\r\n },\r\n },\r\n },\r\n legend: {\r\n x: '1px',\r\n y: '10px',\r\n data: legend,\r\n },\r\n grid: {\r\n left: '3%',\r\n right: '4%',\r\n bottom: '3%',\r\n containLabel: true,\r\n },\r\n toolbox: {\r\n feature: {\r\n saveAsImage: {},\r\n },\r\n },\r\n xAxis: {\r\n type: 'category',\r\n boundaryGap: true,\r\n // axisTick:{\r\n // show:false\r\n // },\r\n // axisLine:{\r\n // show:false\r\n // },\r\n // splitLine: {\r\n // show: false\r\n // },\r\n axisLabel: {\r\n interval: 0,\r\n rotate: 40,\r\n textStyle: {\r\n color: '#000000',\r\n },\r\n },\r\n data: xAxis,\r\n },\r\n yAxis: {\r\n type: 'value',\r\n splitLine: {\r\n show: false,\r\n },\r\n axisLine: {\r\n show: false,\r\n },\r\n },\r\n series: series,\r\n };\r\n // this.TrendList =\r\n })\r\n .catch((res) => {\r\n this.$message.error(res.msg);\r\n });\r\n },\r\n },\r\n};\r\n</script>\r\n\r\n<style scoped lang=\"scss\">\r\n.one {\r\n background: var(--prev-color-primary);\r\n}\r\n.two {\r\n background: #00c050;\r\n}\r\n.three {\r\n background: #ffab2b;\r\n}\r\n.four {\r\n background: #b37feb;\r\n}\r\n.up,\r\n.el-icon-caret-top {\r\n color: #f5222d;\r\n font-size: 12px;\r\n opacity: 1 !important;\r\n}\r\n\r\n.down,\r\n.el-icon-caret-bottom {\r\n color: #39c15b;\r\n font-size: 12px;\r\n}\r\n.curP {\r\n cursor: pointer;\r\n}\r\n.header {\r\n &-title {\r\n font-size: 16px;\r\n color: rgba(0, 0, 0, 0.85);\r\n }\r\n &-time {\r\n font-size: 12px;\r\n color: #000000;\r\n opacity: 0.45;\r\n }\r\n}\r\n\r\n.iconfont {\r\n font-size: 16px;\r\n color: #fff;\r\n}\r\n\r\n.iconCrl {\r\n width: 32px;\r\n height: 32px;\r\n border-radius: 50%;\r\n text-align: center;\r\n line-height: 32px;\r\n opacity: 0.7;\r\n}\r\n\r\n.lan {\r\n background: var(--prev-color-primary);\r\n}\r\n\r\n.iconshangpinliulanliang {\r\n color: #fff;\r\n}\r\n\r\n.infoBox {\r\n width: 20%;\r\n @media screen and (max-width: 1300px) {\r\n width: 25%;\r\n }\r\n @media screen and (max-width: 1200px) {\r\n width: 33%;\r\n }\r\n @media screen and (max-width: 900px) {\r\n width: 50%;\r\n }\r\n}\r\n\r\n.info {\r\n .sp1 {\r\n color: #666;\r\n font-size: 14px;\r\n display: block;\r\n }\r\n .sp2 {\r\n font-weight: 400;\r\n font-size: 30px;\r\n color: rgba(0, 0, 0, 0.85);\r\n display: block;\r\n }\r\n .sp3 {\r\n font-size: 12px;\r\n font-weight: 400;\r\n color: rgba(0, 0, 0, 0.45);\r\n display: block;\r\n }\r\n}\r\n</style>\r\n"]}]}
|
