| 1 |
- {"remainingRequest":"/usr/local/develop/php/www/waibao/project/NN2020060801/addons/admin/node_modules/vue-loader/lib/index.js??vue-loader-options!/usr/local/develop/php/www/waibao/project/NN2020060801/addons/admin/src/views/dashboard/analysis.vue?vue&type=style&index=0&id=67287fde&scoped=true&lang=css&","dependencies":[{"path":"/usr/local/develop/php/www/waibao/project/NN2020060801/addons/admin/src/views/dashboard/analysis.vue","mtime":1603039522000},{"path":"/usr/local/develop/php/www/waibao/project/NN2020060801/addons/admin/node_modules/css-loader/dist/cjs.js","mtime":499162500000},{"path":"/usr/local/develop/php/www/waibao/project/NN2020060801/addons/admin/node_modules/vue-loader/lib/loaders/stylePostLoader.js","mtime":499162500000},{"path":"/usr/local/develop/php/www/waibao/project/NN2020060801/addons/admin/node_modules/postcss-loader/src/index.js","mtime":499162500000},{"path":"/usr/local/develop/php/www/waibao/project/NN2020060801/addons/admin/node_modules/cache-loader/dist/cjs.js","mtime":499162500000},{"path":"/usr/local/develop/php/www/waibao/project/NN2020060801/addons/admin/node_modules/vue-loader/lib/index.js","mtime":499162500000}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:CgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKDQouZWxlLWJvZHkgew0KICBwYWRkaW5nLWJvdHRvbTogMDsNCn0NCg0KLmVsLWNhcmQgew0KICBtYXJnaW4tYm90dG9tOiAxNXB4Ow0KfQ0KDQovKiog57uf6K6h5Y2h54mHICovDQouYW5hbHlzaXMtY2hhcnQtY2FyZC1udW0gew0KICBmb250LXNpemU6IDMwcHg7DQp9DQoNCi5hbmFseXNpcy1jaGFydC1jYXJkLWNvbnRlbnQgew0KICBoZWlnaHQ6IDQwcHg7DQogIGJveC1zaXppbmc6IGJvcmRlci1ib3g7DQogIG1hcmdpbi1ib3R0b206IDEycHg7DQp9DQoNCi5hbmFseXNpcy1jaGFydC1jYXJkLXRleHQgew0KICBwYWRkaW5nLXRvcDogMTJweDsNCn0NCg0KLyoqIOmUgOWUrumineOAgeiuv+mXrumHj+W3peWFt+agjyAqLw0KLmRlbW8tbW9uaXRvci10b29sIHsNCiAgcGFkZGluZzogMCAyMHB4Ow0KfQ0KDQouZGVtby1tb25pdG9yLXRvb2wgPj4+IC5lbC10YWJzX19uYXYtd3JhcDphZnRlciB7DQogIGRpc3BsYXk6IG5vbmU7DQp9DQoNCi5kZW1vLW1vbml0b3ItdG9vbCA+Pj4gLmVsLXRhYnNfX2l0ZW0gew0KICBoZWlnaHQ6IDUwcHg7DQogIGxpbmUtaGVpZ2h0OiA1MHB4Ow0KICBmb250LXNpemU6IDE1cHg7DQp9DQoNCi5kZW1vLW1vbml0b3ItdG9vbCAuZWwtZGF0ZS1lZGl0b3Igew0KICB3aWR0aDogMjU2cHg7DQogIG1hcmdpbi1sZWZ0OiAxMHB4Ow0KfQ0KDQovKiog5bCP5qCH6aKYICovDQouZGVtby1tb25pdG9yLXRpdGxlIHsNCiAgcGFkZGluZzogMCAyMHB4Ow0KICBtYXJnaW46IDE1cHggMCA1cHggMDsNCn0NCg0KLyoqIOaOkuWQjWl0ZW0gKi8NCi5kZW1vLW1vbml0b3ItcmFuay1pdGVtIHsNCiAgcGFkZGluZzogMCAyMHB4Ow0KICBsaW5lLWhlaWdodDogMjBweDsNCiAgbWFyZ2luLXRvcDogMThweDsNCn0NCg=="},{"version":3,"sources":["analysis.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4WA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA","file":"analysis.vue","sourceRoot":"src/views/dashboard","sourcesContent":["<template>\r\n <div class=\"ele-body\">\r\n <el-row :gutter=\"15\">\r\n <el-col :md=\"6\" :sm=\"12\">\r\n <el-card class=\"analysis-chart-card\" shadow=\"never\">\r\n <div slot=\"header\">\r\n <span>总销售额</span>\r\n <el-tooltip content=\"指标说明\" placement=\"top\">\r\n <i class=\"el-icon-_question ele-pull-right ele-text-placeholder\" style=\"cursor: pointer;\"></i>\r\n </el-tooltip>\r\n </div>\r\n <div class=\"analysis-chart-card-num\">¥ 126,560</div>\r\n <div class=\"analysis-chart-card-content\" style=\"padding-top: 18px;\">\r\n <span class=\"ele-action\">周同比12%<i class=\"el-icon-caret-top ele-text-danger\"></i></span>\r\n <span class=\"ele-action\">日同比11%<i class=\"el-icon-caret-bottom ele-text-success\"></i></span>\r\n </div>\r\n <el-divider/>\r\n <div class=\"analysis-chart-card-text\">日销售额 ￥12,423</div>\r\n </el-card>\r\n </el-col>\r\n <el-col :md=\"6\" :sm=\"12\">\r\n <el-card class=\"analysis-chart-card\" shadow=\"never\">\r\n <div slot=\"header\">\r\n <span>访问量</span>\r\n <el-tag type=\"danger\" size=\"mini\" class=\"ele-pull-right\">日</el-tag>\r\n </div>\r\n <div class=\"analysis-chart-card-num\">8,846</div>\r\n <div class=\"analysis-chart-card-content\">\r\n <ele-chart :option=\"visitChartOption\" style=\"height:40px;\"/>\r\n </div>\r\n <el-divider/>\r\n <div class=\"analysis-chart-card-text\">日访问量 1,234</div>\r\n </el-card>\r\n </el-col>\r\n <el-col :md=\"6\" :sm=\"12\">\r\n <el-card class=\"analysis-chart-card\" shadow=\"never\">\r\n <div slot=\"header\">\r\n <span>支付笔数</span>\r\n <el-tag size=\"mini\" class=\"ele-pull-right\">月</el-tag>\r\n </div>\r\n <div class=\"analysis-chart-card-num\">6,560</div>\r\n <div class=\"analysis-chart-card-content\">\r\n <ele-chart :option=\"payNumChartOption\" style=\"height:40px;\"/>\r\n </div>\r\n <el-divider/>\r\n <div class=\"analysis-chart-card-text\">转化率 60%</div>\r\n </el-card>\r\n </el-col>\r\n <el-col :md=\"6\" :sm=\"12\">\r\n <el-card class=\"analysis-chart-card\" shadow=\"never\">\r\n <div slot=\"header\">\r\n <span>运营活动效果</span>\r\n <el-tag type=\"success\" size=\"mini\" class=\"ele-pull-right\">周</el-tag>\r\n </div>\r\n <div class=\"analysis-chart-card-num\">78%</div>\r\n <div class=\"analysis-chart-card-content\" style=\"padding-top: 25px;\">\r\n <el-progress :percentage=\"78\" :show-text=\"false\" :stroke-width=\"10\" color=\"#13c2c2\"/>\r\n </div>\r\n <el-divider/>\r\n <div class=\"analysis-chart-card-text\">\r\n <span class=\"ele-action\">周同比12%<i class=\"el-icon-caret-top ele-text-danger\"/></span>\r\n <span class=\"ele-action\">日同比11%<i class=\"el-icon-caret-bottom ele-text-success\"/></span>\r\n </div>\r\n </el-card>\r\n </el-col>\r\n </el-row>\r\n <el-card shadow=\"never\" body-style=\"padding:0;\">\r\n <!-- 头部工具栏 -->\r\n <div class=\"ele-cell demo-monitor-tool\">\r\n <div class=\"ele-cell-content\">\r\n <el-tabs v-model=\"saleSearch.type\" class=\"demo-monitor-tabs\" @tab-click=\"onSaleTypeChange\">\r\n <el-tab-pane label=\"销售额\" name=\"saleroom\"/>\r\n <el-tab-pane label=\"访问量\" name=\"visits\"/>\r\n </el-tabs>\r\n </div>\r\n <div class=\"ele-inline-block hidden-xs-only\">\r\n <el-radio-group v-model=\"saleSearch.dateType\" size=\"small\">\r\n <el-radio-button :label=\"0\">今天</el-radio-button>\r\n <el-radio-button :label=\"1\">本周</el-radio-button>\r\n <el-radio-button :label=\"2\">本月</el-radio-button>\r\n <el-radio-button :label=\"3\">本年</el-radio-button>\r\n </el-radio-group>\r\n </div>\r\n <div class=\"ele-inline-block hidden-xs-only\">\r\n <el-date-picker v-model=\"saleSearch.datetime\" type=\"daterange\" range-separator=\"至\" size=\"small\"\r\n start-placeholder=\"开始日期\" end-placeholder=\"结束日期\" unlink-panels/>\r\n </div>\r\n </div>\r\n <el-divider/>\r\n <el-row>\r\n <el-col :md=\"18\" :sm=\"16\">\r\n <div class=\"demo-monitor-title\">{{ {saleroom: '销售', visits: '访问量'}[saleSearch.type] }}趋势</div>\r\n <ele-chart :option=\"saleChartOption\" style=\"height:285px;\"/>\r\n </el-col>\r\n <el-col :md=\"6\" :sm=\"8\">\r\n <div class=\"demo-monitor-title\">门店{{ {saleroom: '销售额', visits: '访问量'}[saleSearch.type] }}排名</div>\r\n <div v-for=\"(item,index) in saleroomRankData\" :key=\"index\" class=\"demo-monitor-rank-item ele-cell\">\r\n <el-tag :type=\"index<3?'':'info'\" size=\"mini\" class=\"ele-tag-round\">{{ index + 1 }}</el-tag>\r\n <div class=\"ele-cell-content\">{{ item.name }}</div>\r\n <div class=\"ele-text-secondary\">{{ item.value }}</div>\r\n </div>\r\n </el-col>\r\n </el-row>\r\n </el-card>\r\n <el-row :gutter=\"15\">\r\n <el-col :md=\"18\" :sm=\"16\">\r\n <el-card shadow=\"never\" header=\"最近1小时访问情况\" body-style=\"padding:10px 5px 0 0;\">\r\n <ele-chart :option=\"visitHourChartOption\" style=\"height:323px;\"/>\r\n </el-card>\r\n </el-col>\r\n <el-col :md=\"6\" :sm=\"8\">\r\n <el-card shadow=\"never\" header=\"热门搜索\">\r\n <ele-word-cloud :data=\"hotSearchData\" style=\"height:303px;\"/>\r\n </el-card>\r\n </el-col>\r\n </el-row>\r\n </div>\r\n</template>\r\n\r\n<script>\r\nimport EleChart from '@/components/EleChart'\r\nimport EleWordCloud from '@/components/EleChart/EleWordCloud'\r\n\r\nexport default {\r\n name: \"Analysis\",\r\n components: {EleChart, EleWordCloud},\r\n data() {\r\n return {\r\n payNumData: [], // 支付笔数\r\n saleSearch: {type: 'saleroom', dateType: 0, datetime: ''}, // 销售量搜索参数\r\n saleroomData: [], // 销售量数据\r\n saleroomRankData: [], // 销售量排名数据\r\n visitHourData: [], // 最近1小时访问情况数据\r\n hotSearchData: [] // 词云数据\r\n }\r\n },\r\n computed: {\r\n /* 访问量折线图配置 */\r\n visitChartOption() {\r\n return {\r\n color: '#975fe5',\r\n tooltip: {\r\n trigger: 'axis', formatter: '<i class=\"ele-chart-dot\" style=\"background-color:#975fe5;\"></i>{b0}: {c0}'\r\n },\r\n grid: {top: 10, bottom: 0, left: 0, right: 0},\r\n xAxis: [{\r\n show: false, type: 'category', boundaryGap: false,\r\n data: this.payNumData.map(d => d.date)\r\n }],\r\n yAxis: [{\r\n show: false, type: 'value', splitLine: {show: false}\r\n }],\r\n series: [{\r\n type: 'line', smooth: true, animation: false,\r\n symbol: 'none', areaStyle: {opacity: 0.5},\r\n data: this.payNumData.map(d => d.value)\r\n }]\r\n };\r\n },\r\n /* 支付笔数柱状图配置 */\r\n payNumChartOption() {\r\n return {\r\n tooltip: {\r\n trigger: 'axis', formatter: '<i class=\"ele-chart-dot\" style=\"background-color:#3aa1ff;\"></i>{b0}: {c0}'\r\n },\r\n grid: {top: 10, bottom: 0, left: 0, right: 0},\r\n xAxis: [{\r\n show: false, type: 'category',\r\n data: this.payNumData.map(d => d.date)\r\n }],\r\n yAxis: [{\r\n show: false, type: 'value', splitLine: {show: false}\r\n }],\r\n series: [{\r\n type: 'bar',\r\n data: this.payNumData.map(d => d.value)\r\n }]\r\n }\r\n },\r\n /* 销售额柱状图配置 */\r\n saleChartOption() {\r\n return {\r\n tooltip: {trigger: 'axis'},\r\n xAxis: [{\r\n type: 'category',\r\n data: this.saleroomData.map(d => d.month)\r\n }],\r\n yAxis: [{type: 'value'}],\r\n series: [{\r\n type: 'bar',\r\n data: this.saleroomData.map(d => d.value)\r\n }]\r\n };\r\n },\r\n /* 最近1小时访问情况折线图配置 */\r\n visitHourChartOption() {\r\n return {\r\n tooltip: {trigger: 'axis'},\r\n legend: {data: ['浏览量', '访问量'], right: 20},\r\n xAxis: [{\r\n type: 'category',\r\n boundaryGap: false,\r\n data: this.visitHourData.map(d => d.time)\r\n }],\r\n yAxis: [{type: 'value'}],\r\n series: [{\r\n name: '浏览量', type: 'line', smooth: true,\r\n symbol: 'none', areaStyle: {opacity: 0.5},\r\n data: this.visitHourData.map(d => d.views)\r\n }, {\r\n name: '访问量', type: 'line', smooth: true,\r\n symbol: 'none', areaStyle: {opacity: 0.5},\r\n data: this.visitHourData.map(d => d.visits)\r\n }]\r\n }\r\n }\r\n },\r\n mounted() {\r\n this.getPayNumData();\r\n this.getSaleroomData();\r\n this.getVisitHourData();\r\n this.getWordCloudData();\r\n },\r\n methods: {\r\n /* 获取支付笔数数据 */\r\n getPayNumData() {\r\n this.payNumData = [\r\n {date: '2020-06-12', value: 7},\r\n {date: '2020-06-13', value: 5},\r\n {date: '2020-06-14', value: 4},\r\n {date: '2020-06-15', value: 2},\r\n {date: '2020-06-16', value: 4},\r\n {date: '2020-06-17', value: 7},\r\n {date: '2020-06-18', value: 5},\r\n {date: '2020-06-19', value: 6},\r\n {date: '2020-06-20', value: 5},\r\n {date: '2020-06-21', value: 9},\r\n {date: '2020-06-22', value: 6},\r\n {date: '2020-06-23', value: 3},\r\n {date: '2020-06-24', value: 1},\r\n {date: '2020-06-25', value: 5},\r\n {date: '2020-06-26', value: 3},\r\n {date: '2020-06-27', value: 6},\r\n {date: '2020-06-18', value: 5}\r\n ];\r\n },\r\n /* 获取销售量数据 */\r\n getSaleroomData() {\r\n if (this.saleSearch.type === 'saleroom') {\r\n this.saleroomData = [\r\n {month: '1月', value: 816},\r\n {month: '2月', value: 542},\r\n {month: '3月', value: 914},\r\n {month: '4月', value: 781},\r\n {month: '5月', value: 355},\r\n {month: '6月', value: 796},\r\n {month: '7月', value: 714},\r\n {month: '8月', value: 1195},\r\n {month: '9月', value: 1055},\r\n {month: '10月', value: 271},\r\n {month: '11月', value: 384},\r\n {month: '12月', value: 1098}\r\n ];\r\n } else {\r\n this.saleroomData = [\r\n {month: '1月', value: 1098},\r\n {month: '2月', value: 384},\r\n {month: '3月', value: 271},\r\n {month: '4月', value: 1055},\r\n {month: '5月', value: 1195},\r\n {month: '6月', value: 714},\r\n {month: '7月', value: 796},\r\n {month: '8月', value: 355},\r\n {month: '9月', value: 781},\r\n {month: '10月', value: 914},\r\n {month: '11月', value: 542},\r\n {month: '12月', value: 816}\r\n ];\r\n }\r\n this.saleroomRankData = [\r\n {name: '工专路 1 号店', value: '323,234'},\r\n {name: '工专路 2 号店', value: '323,234'},\r\n {name: '工专路 3 号店', value: '323,234'},\r\n {name: '工专路 4 号店', value: '323,234'},\r\n {name: '工专路 5 号店', value: '323,234'},\r\n {name: '工专路 6 号店', value: '323,234'},\r\n {name: '工专路 7 号店', value: '323,234'}\r\n ];\r\n },\r\n /* 获取最近1小时访问情况数据 */\r\n getVisitHourData() {\r\n this.visitHourData = [\r\n {time: '16:00', visits: 15, views: 45},\r\n {time: '16:05', visits: 39, views: 169},\r\n {time: '16:10', visits: 152, views: 400},\r\n {time: '16:15', visits: 94, views: 285},\r\n {time: '16:20', visits: 102, views: 316},\r\n {time: '16:25', visits: 86, views: 148},\r\n {time: '16:30', visits: 39, views: 150},\r\n {time: '16:35', visits: 38, views: 234},\r\n {time: '16:40', visits: 95, views: 158},\r\n {time: '16:45', visits: 30, views: 100},\r\n {time: '16:50', visits: 86, views: 266}\r\n ];\r\n },\r\n /* 获取词云数据 */\r\n getWordCloudData() {\r\n this.hotSearchData = [\r\n {name: \"软妹子\", value: 23},\r\n {name: \"汪星人\", value: 23},\r\n {name: \"长腿欧巴\", value: 23},\r\n {name: \"萝莉\", value: 22},\r\n {name: \"辣~\", value: 22},\r\n {name: \"K歌\", value: 22},\r\n {name: \"大长腿\", value: 21},\r\n {name: \"川妹子\", value: 21},\r\n {name: \"女神\", value: 21},\r\n {name: \"米粉\", value: 20},\r\n {name: \"专注设计\", value: 20},\r\n {name: \"逛街\", value: 20},\r\n {name: \"黑长直\", value: 20},\r\n {name: \"海纳百川\", value: 19},\r\n {name: \"萌萌哒\", value: 19},\r\n {name: \"坚持\", value: 19},\r\n {name: \"话唠\", value: 19},\r\n {name: \"果粉\", value: 18},\r\n {name: \"喵星人\", value: 18},\r\n {name: \"花粉\", value: 18},\r\n {name: \"衬衫控\", value: 18},\r\n {name: \"宅男\", value: 17},\r\n {name: \"小清新\", value: 17},\r\n {name: \"眼镜男\", value: 17},\r\n {name: \"琼瑶\", value: 17},\r\n {name: \"穷游党\", value: 16},\r\n {name: \"铲屎官\", value: 16},\r\n {name: \"正太\", value: 16},\r\n {name: \"中二病\", value: 16},\r\n {name: \"夜猫子\", value: 15},\r\n {name: \"逗比\", value: 15},\r\n {name: \"腹黑\", value: 15},\r\n {name: \"吃鸡\", value: 15},\r\n {name: \"为了联盟\", value: 14},\r\n {name: \"背包客\", value: 14},\r\n {name: \"民谣\", value: 14},\r\n {name: \"为了部落\", value: 14},\r\n {name: \"懒癌患者\", value: 13},\r\n {name: \"追剧\", value: 13},\r\n {name: \"IT民工\", value: 13},\r\n {name: \"CNB成员\", value: 13},\r\n {name: \"选择困难\", value: 12},\r\n {name: \"锤粉\", value: 12},\r\n {name: \"欧皇\", value: 12},\r\n {name: \"仙气十足\", value: 12}\r\n ];\r\n },\r\n /* 销售量tab选择改变事件 */\r\n onSaleTypeChange() {\r\n this.getSaleroomData();\r\n }\r\n }\r\n}\r\n</script>\r\n\r\n<style scoped>\r\n.ele-body {\r\n padding-bottom: 0;\r\n}\r\n\r\n.el-card {\r\n margin-bottom: 15px;\r\n}\r\n\r\n/** 统计卡片 */\r\n.analysis-chart-card-num {\r\n font-size: 30px;\r\n}\r\n\r\n.analysis-chart-card-content {\r\n height: 40px;\r\n box-sizing: border-box;\r\n margin-bottom: 12px;\r\n}\r\n\r\n.analysis-chart-card-text {\r\n padding-top: 12px;\r\n}\r\n\r\n/** 销售额、访问量工具栏 */\r\n.demo-monitor-tool {\r\n padding: 0 20px;\r\n}\r\n\r\n.demo-monitor-tool >>> .el-tabs__nav-wrap:after {\r\n display: none;\r\n}\r\n\r\n.demo-monitor-tool >>> .el-tabs__item {\r\n height: 50px;\r\n line-height: 50px;\r\n font-size: 15px;\r\n}\r\n\r\n.demo-monitor-tool .el-date-editor {\r\n width: 256px;\r\n margin-left: 10px;\r\n}\r\n\r\n/** 小标题 */\r\n.demo-monitor-title {\r\n padding: 0 20px;\r\n margin: 15px 0 5px 0;\r\n}\r\n\r\n/** 排名item */\r\n.demo-monitor-rank-item {\r\n padding: 0 20px;\r\n line-height: 20px;\r\n margin-top: 18px;\r\n}\r\n</style>"]}]}
|
