| 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\\toDay.vue?vue&type=style&index=0&id=c36f0448&lang=scss&scoped=true","dependencies":[{"path":"D:\\front\\item\\zyAdmin\\src\\pages\\statistic\\transaction\\components\\toDay.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:DQoudXAsDQouZWwtaWNvbi1jYXJldC10b3AsDQouY29udGVudC1pcyB7DQogIGNvbG9yOiAjZjUyMjJkOw0KICBmb250LXNpemU6IDEycHg7DQogIG9wYWNpdHk6IDEgIWltcG9ydGFudDsNCg0KICAmLmRvd24gew0KICAgIGNvbG9yOiAjMzljMTViOw0KICB9DQp9DQoNCi5kb3duLA0KLmVsLWljb24tY2FyZXQtYm90dG9tIC5jb250ZW50LWlzIHsNCiAgZm9udC1zaXplOiAxMnB4Ow0KfQ0KDQouZWwtaWNvbi1jYXJldC1ib3R0b20gew0KICBjb2xvcjogIzM5YzE1YjsNCn0NCg0KLmJyIHsNCiAgYm9yZGVyLXJpZ2h0OiAxcHggc29saWQgcmdiYSgwLCAwLCAwLCAwLjEpOw0KfQ0KDQoudG9EYXkgew0KICB3aWR0aDogNDklOw0KICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7DQoNCiAgJi10aXRsZSB7DQogICAgZm9udC1zaXplOiAxNHB4Ow0KICB9DQoNCiAgJi1udW1iZXIgew0KICAgIGZvbnQtc2l6ZTogMjBweDsNCiAgfQ0KDQogICYtdGltZSB7DQogICAgZm9udC1zaXplOiAxMnB4Ow0KICAgIGNvbG9yOiAjOGM4YzhjOw0KICAgIG1hcmdpbi1ib3R0b206IDVweDsNCiAgfQ0KfQ0KDQoudGl0bGUgew0KICBmb250LXNpemU6IDE2cHg7DQogIGNvbG9yOiAjMDAwMDAwOw0KICBmb250LXdlaWdodDogNTAwOw0KfQ0KDQoucHJpY2Ugew0KICBpIHsNCiAgICBmb250LXN0eWxlOiBub3JtYWw7DQogICAgZm9udC1zaXplOiAyMXB4Ow0KICAgIGNvbG9yOiAjMDAwOw0KICB9DQp9DQo="},{"version":3,"sources":["toDay.vue"],"names":[],"mappings":";AAkcA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA","file":"toDay.vue","sourceRoot":"src/pages/statistic/transaction/components","sourcesContent":["<template>\r\n <el-card :bordered=\"false\" shadow=\"never\" class=\"ivu-mt\">\r\n <el-row>\r\n <el-col v-if=\"statisticsData\" class=\"br\" v-bind=\"grid\">\r\n <div>\r\n <h4 class=\"title mb15\">今日订单金额</h4>\r\n <div class=\"price\">\r\n ￥<i>{{ statisticsData.left.series[0].money }}</i>\r\n </div>\r\n </div>\r\n <echarts-new\r\n v-if=\"optionData\"\r\n key=\"1\"\r\n ref=\"visitChart\"\r\n height=\"100%\"\r\n width=\"100%\"\r\n :option-data=\"optionData\"\r\n :styles=\"style\"\r\n />\r\n </el-col>\r\n <el-col v-if=\"statisticsData\" v-bind=\"grid\">\r\n <div class=\"pl25\">\r\n <div class=\"toDay\">\r\n <span class=\"toDay-title spBlock mb10\">今日订单数</span>\r\n <span class=\"toDay-number spBlock mb10\">{{ statisticsData.right.today.series[0].now_money }}</span>\r\n <span class=\"toDay-time spBlock\">昨日：{{ statisticsData.right.today.series[0].last_money }}</span>\r\n <span class=\"toDay-time spBlock\"\r\n >日环比：\r\n <i class=\"content-is\" :class=\"Number(statisticsData.right.today.series[0].rate) >= 0 ? 'up' : 'down'\"\r\n >{{ Math.floor(statisticsData.right.today.series[0].rate) }}%</i\r\n >\r\n <i\r\n :style=\"{ color: Number(statisticsData.right.today.series[0].rate) >= 0 ? '#F5222D' : '#39C15B' }\"\r\n :class=\"[\r\n Number(statisticsData.right.today.series[0].rate) >= 0 ? 'el-icon-caret-top' : 'el-icon-caret-bottom',\r\n ]\"\r\n />\r\n </span>\r\n <echarts-new\r\n v-if=\"optionTodatOrder\"\r\n key=\"2\"\r\n ref=\"visitChart\"\r\n height=\"100%\"\r\n width=\"100%\"\r\n :option-data=\"optionTodatOrder\"\r\n :styles=\"styleToday\"\r\n />\r\n <span class=\"toDay-title spBlock mb10\">本月订单数</span>\r\n <span class=\"toDay-number spBlock mb10\">{{ statisticsData.right.month[0].now_money }}</span>\r\n <span class=\"toDay-time spBlock\">上月：{{ statisticsData.right.month[0].last_money }}</span>\r\n <span class=\"toDay-time spBlock\"\r\n >月环比：\r\n <i class=\"content-is\" :class=\"Number(statisticsData.right.month[0].rate) >= 0 ? 'up' : 'down'\"\r\n >{{ Math.floor(statisticsData.right.month[0].rate) }}%</i\r\n >\r\n <i\r\n :style=\"{ color: Number(statisticsData.right.month[0].rate) >= 0 ? '#F5222D' : '#39C15B' }\"\r\n :class=\"[\r\n Number(statisticsData.right.month[0].rate) >= 0 ? 'el-icon-caret-top' : 'el-icon-caret-bottom',\r\n ]\"\r\n />\r\n </span>\r\n </div>\r\n <div class=\"toDay\" style=\"border: none\">\r\n <span class=\"toDay-title spBlock mb10\">今日支付人数</span>\r\n <span class=\"toDay-number spBlock mb10\">{{ statisticsData.right.today.series[1].now_money }}</span>\r\n <span class=\"toDay-time spBlock\">昨日：{{ statisticsData.right.today.series[1].last_money }}</span>\r\n <span class=\"toDay-time spBlock\"\r\n >日环比：\r\n <i class=\"content-is\" :class=\"Number(statisticsData.right.today.series[1].rate) >= 0 ? 'up' : 'down'\"\r\n >{{ Math.floor(statisticsData.right.today.series[1].rate) }}%</i\r\n >\r\n <i\r\n :style=\"{ color: Number(statisticsData.right.today.series[1].rate) >= 0 ? '#F5222D' : '#39C15B' }\"\r\n :class=\"[\r\n Number(statisticsData.right.today.series[1].rate) >= 0 ? 'el-icon-caret-top' : 'el-icon-caret-bottom',\r\n ]\"\r\n />\r\n </span>\r\n <echarts-new\r\n v-if=\"optionOrderUser\"\r\n key=\"3\"\r\n ref=\"visitChart\"\r\n height=\"100%\"\r\n width=\"100%\"\r\n :option-data=\"optionOrderUser\"\r\n :styles=\"styleToday\"\r\n />\r\n <span class=\"toDay-title spBlock mb10\">本月支付人数</span>\r\n <span class=\"toDay-number spBlock mb10\">{{ statisticsData.right.month[1].now_money }}</span>\r\n <span class=\"toDay-time spBlock\">上月：{{ statisticsData.right.month[1].last_money }}</span>\r\n <span class=\"toDay-time spBlock\"\r\n >月环比：\r\n <i class=\"content-is\" :class=\"Number(statisticsData.right.month[1].rate) >= 0 ? 'up' : 'down'\"\r\n >{{ Math.floor(statisticsData.right.month[1].rate) }}%</i\r\n >\r\n <i\r\n :style=\"{ color: Number(statisticsData.right.month[1].rate) >= 0 ? '#F5222D' : '#39C15B' }\"\r\n :class=\"[\r\n Number(statisticsData.right.month[1].rate) >= 0 ? 'el-icon-caret-top' : 'el-icon-caret-bottom',\r\n ]\"\r\n />\r\n </span>\r\n </div>\r\n </div>\r\n </el-col>\r\n </el-row>\r\n </el-card>\r\n</template>\r\n\r\n<script>\r\nimport { statisticTopTradeApi } from '@/api/statistic';\r\nimport echartsNew from '@/components/echartsNew/index';\r\nimport echarts from 'echarts';\r\nexport default {\r\n name: 'ToDay',\r\n components: {\r\n echartsNew,\r\n },\r\n data() {\r\n return {\r\n style: {\r\n height: '200px',\r\n },\r\n styleToday: {\r\n height: '130px',\r\n },\r\n legendData: ['今天', '昨天'],\r\n seriesData: [],\r\n timer: [],\r\n grid: {\r\n xl: 12,\r\n lg: 12,\r\n md: 12,\r\n sm: 24,\r\n xs: 24,\r\n },\r\n statisticsData: '',\r\n optionTodatOrder: {}, // 今日订单数\r\n orderData: {},\r\n orderUserData: {},\r\n optionData: {}, // 今日交易数据\r\n listLoading: false,\r\n optionDataOrder: {},\r\n optionOrderUser: {}, // 今日支付人数\r\n };\r\n },\r\n beforeDestroy() {\r\n if (this.visitChart) {\r\n this.visitChart.dispose();\r\n this.visitChart = null;\r\n }\r\n },\r\n mounted() {\r\n this.getList();\r\n // this.getOrder()\r\n // this.getOrderUser()\r\n },\r\n methods: {\r\n getList() {\r\n this.listLoading = true;\r\n statisticTopTradeApi({ time: 'today' })\r\n .then((res) => {\r\n // 今日交易数据\r\n this.statisticsData = res.data;\r\n const leftOrder = res.data.left;\r\n const leftToday = [];\r\n const leftLegendData = leftOrder.x;\r\n Object.keys(leftOrder.series[0].value).forEach((key) => {\r\n leftToday.push(Number(leftOrder.series[0].value[key]));\r\n });\r\n const leftYesterday = [];\r\n Object.keys(leftOrder.series[1].value).forEach((key) => {\r\n leftYesterday.push(Number(leftOrder.series[1].value[key]));\r\n });\r\n const seriesData = [\r\n {\r\n name: '今天',\r\n type: 'line',\r\n areaStyle: {\r\n normal: {\r\n color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [\r\n {\r\n offset: 0,\r\n color: '#5B8FF9',\r\n },\r\n {\r\n offset: 0.5,\r\n color: '#fff',\r\n },\r\n {\r\n offset: 1,\r\n color: '#fff',\r\n },\r\n ]),\r\n },\r\n },\r\n itemStyle: {\r\n normal: {\r\n color: '#5B8FF9',\r\n lineStyle: {\r\n color: '#5B8FF9',\r\n },\r\n },\r\n },\r\n data: leftToday,\r\n symbol: 'none',\r\n smooth: true,\r\n },\r\n {\r\n name: '昨天',\r\n type: 'line',\r\n areaStyle: {\r\n normal: {\r\n color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [\r\n {\r\n offset: 0,\r\n color: '#BFBFBF',\r\n },\r\n {\r\n offset: 0.5,\r\n color: '#fff',\r\n },\r\n {\r\n offset: 1,\r\n color: '#fff',\r\n },\r\n ]),\r\n },\r\n },\r\n itemStyle: {\r\n normal: {\r\n color: '#D9D9D9',\r\n lineStyle: {\r\n color: '#D9D9D9',\r\n },\r\n },\r\n },\r\n data: leftYesterday,\r\n symbol: 'none',\r\n smooth: true,\r\n },\r\n ];\r\n this.optionData = {\r\n tooltip: {\r\n trigger: 'axis',\r\n },\r\n legend: {\r\n x: '1px',\r\n y: '10px',\r\n data: ['今天', '昨天'],\r\n },\r\n grid: {\r\n left: '0%',\r\n right: '4%',\r\n bottom: '3%',\r\n containLabel: true,\r\n },\r\n xAxis: [\r\n {\r\n boundaryGap: false,\r\n data: leftLegendData,\r\n axisLine: {\r\n show: false,\r\n },\r\n show: false,\r\n },\r\n ],\r\n yAxis: {\r\n show: false,\r\n },\r\n series: seriesData,\r\n };\r\n\r\n // 今日订单数\r\n const rightOrder = res.data.right;\r\n const rightLegendData = rightOrder.today.x;\r\n const rightTodayOrder = [];\r\n Object.keys(rightOrder.today.series[0].value).forEach((key) => {\r\n rightTodayOrder.push(Number(rightOrder.today.series[0].value[key]));\r\n });\r\n const rightSeriesDataOrder = [\r\n {\r\n name: '今天',\r\n type: 'line',\r\n areaStyle: {\r\n normal: {\r\n color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [\r\n {\r\n offset: 0,\r\n color: '#5B8FF9',\r\n },\r\n {\r\n offset: 0.5,\r\n color: '#fff',\r\n },\r\n {\r\n offset: 1,\r\n color: '#fff',\r\n },\r\n ]),\r\n },\r\n },\r\n itemStyle: {\r\n normal: {\r\n color: '#5B8FF9',\r\n lineStyle: {\r\n color: '#5B8FF9',\r\n },\r\n },\r\n },\r\n data: rightTodayOrder,\r\n symbol: 'none',\r\n smooth: true,\r\n },\r\n ];\r\n this.optionTodatOrder = {\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: ['今天'],\r\n },\r\n grid: {\r\n left: '0%',\r\n right: '4%',\r\n bottom: '3%',\r\n containLabel: true,\r\n },\r\n axisLine: {\r\n show: false,\r\n },\r\n xAxis: [\r\n {\r\n type: 'category',\r\n boundaryGap: false,\r\n data: rightLegendData,\r\n axisLine: {\r\n show: false,\r\n },\r\n show: false,\r\n },\r\n ],\r\n yAxis: {\r\n show: false,\r\n },\r\n series: rightSeriesDataOrder,\r\n };\r\n\r\n // 今日支付人数\r\n const rightTodayPay = [];\r\n Object.keys(rightOrder.today.series[1].value).forEach((key) => {\r\n rightTodayPay.push(Number(rightOrder.today.series[1].value[key]));\r\n });\r\n const seriesDataPay = [\r\n {\r\n name: '今天',\r\n type: 'line',\r\n areaStyle: {\r\n normal: {\r\n color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [\r\n {\r\n offset: 0,\r\n color: '#5B8FF9',\r\n },\r\n {\r\n offset: 0.5,\r\n color: '#fff',\r\n },\r\n {\r\n offset: 1,\r\n color: '#fff',\r\n },\r\n ]),\r\n },\r\n },\r\n itemStyle: {\r\n normal: {\r\n color: '#5B8FF9',\r\n lineStyle: {\r\n color: '#5B8FF9',\r\n },\r\n },\r\n },\r\n data: rightTodayPay,\r\n symbol: 'none',\r\n smooth: true,\r\n },\r\n ];\r\n this.optionOrderUser = {\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: ['今天'],\r\n },\r\n grid: {\r\n left: '0%',\r\n right: '4%',\r\n bottom: '3%',\r\n containLabel: true,\r\n },\r\n axisLine: {\r\n show: false,\r\n },\r\n xAxis: [\r\n {\r\n type: 'category',\r\n boundaryGap: false,\r\n data: leftLegendData,\r\n axisLine: {\r\n show: false,\r\n },\r\n show: false,\r\n },\r\n ],\r\n yAxis: {\r\n show: false,\r\n },\r\n series: seriesDataPay,\r\n };\r\n })\r\n .catch((res) => {\r\n this.listLoading = false;\r\n this.$message.error(res.msg);\r\n });\r\n },\r\n getOrder() {},\r\n getOrderUser() {},\r\n },\r\n};\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.up,\r\n.el-icon-caret-top,\r\n.content-is {\r\n color: #f5222d;\r\n font-size: 12px;\r\n opacity: 1 !important;\r\n\r\n &.down {\r\n color: #39c15b;\r\n }\r\n}\r\n\r\n.down,\r\n.el-icon-caret-bottom .content-is {\r\n font-size: 12px;\r\n}\r\n\r\n.el-icon-caret-bottom {\r\n color: #39c15b;\r\n}\r\n\r\n.br {\r\n border-right: 1px solid rgba(0, 0, 0, 0.1);\r\n}\r\n\r\n.toDay {\r\n width: 49%;\r\n display: inline-block;\r\n\r\n &-title {\r\n font-size: 14px;\r\n }\r\n\r\n &-number {\r\n font-size: 20px;\r\n }\r\n\r\n &-time {\r\n font-size: 12px;\r\n color: #8c8c8c;\r\n margin-bottom: 5px;\r\n }\r\n}\r\n\r\n.title {\r\n font-size: 16px;\r\n color: #000000;\r\n font-weight: 500;\r\n}\r\n\r\n.price {\r\n i {\r\n font-style: normal;\r\n font-size: 21px;\r\n color: #000;\r\n }\r\n}\r\n</style>\r\n"]}]}
|
