123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652 |
- <template>
- <div class="statistical-page" ref="container">
- <div class="navs">
- <div class="list">
- <div class="item" :class="time == 'today' ? 'on' : ''" @click="setTime('today')">
- 今天
- </div>
- <div class="item" :class="time == 'yesterday' ? 'on' : ''" @click="setTime('yesterday')">
- 昨天
- </div>
- <div class="item" :class="time == 'seven' ? 'on' : ''" @click="setTime('seven')">
- 最近7天
- </div>
- <div class="item" :class="time == 'month' ? 'on' : ''" @click="setTime('month')">
- 本月
- </div>
- <div class="item" :class="time == 'date' ? 'on' : ''" @click="dateTitle">
-
- {{ value }}
- 自定义
- </div>
- </div>
- </div>
- <div class="wrapper">
- <div class="title">
- {{ time == 'date'?'':title }}{{ where.type == 1 ? "营业额(元)" : "订单量(份)" }}
- </div>
- <div class="money">{{ time_price }}</div>
- <div class="increase acea-row row-between-wrapper">
- <div>
- {{ time == 'date'?'':title }}增长率:<span :class="increase_time_status === 1 ? 'red' : 'green'">{{ increase_time_status === 1 ? "" : "-" }}{{ growth_rate }}%
- <span class="iconfont" :class="
- increase_time_status === 1
- ? 'icon-xiangshang1'
- : 'icon-xiangxia2'
- "></span></span>
- </div>
- <div>
- {{ time == 'date'?'':title }}增长:<span :class="increase_time_status === 1 ? 'red' : 'green'">{{ increase_time_status === 1 ? "" : "-" }}{{ increase_time }}
- <span class="iconfont" :class="
- increase_time_status === 1
- ? 'icon-xiangshang1'
- : 'icon-xiangxia2'
- "></span></span>
- </div>
- </div>
- </div>
- <div class="chart">
- <div class="chart-title">
- 单位({{where.type == 1?'元':'份'}})
- </div>
- <canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" disable-scroll=true @touchstart="touchLineA"
- @touchmove="moveLineA" @touchend="touchEndLineA">
- </canvas>
- </div>
- <div class="public-wrapper">
- <div class="title">
- <span class="iconfont icon-xiangxishuju"></span>详细数据
- </div>
- <div class="nav acea-row row-between-wrapper">
- <div class="data">日期</div>
- <div class="browse">订单量</div>
- <div class="turnover">成交额</div>
- </div>
- <div class="conter">
- <div class="item acea-row row-between-wrapper" v-for="(item, index) in list" :key="index">
- <div class="data">{{ item.time }}</div>
- <div class="browse">{{ item.count }}</div>
- <div class="turnover">{{ item.price }}</div>
- </div>
- </div>
- </div>
-
- <uni-calendar ref="calendar" :date="info.date" :insert="info.insert" :lunar="info.lunar" :startDate="info.startDate" :endDate="info.endDate" :range="info.range" @confirm="confirm" :showMonth="info.showMonth" />
- <div class="mask" @touchmove.prevent v-show="current === true" @click="close"></div>
-
- </div>
- </template>
- <script>
- import uCharts from '../components/ucharts/ucharts'
- import uniCalendar from '@/components/uni-calendar/uni-calendar.vue'
- var canvaLineA = null;
- import {
- getStatisticsMonth,
- getStatisticsTime
- } from "@/api/admin";
- const year = new Date().getFullYear();
- const month = new Date().getMonth() + 1;
- const day = new Date().getDate();
- export default {
- name: "Statistics",
- components: {
- uniCalendar
- },
- props: {},
- data: function() {
- return {
- value: [
- [year, month, day - 1],
- [year, month, day]
- ],
- isrange: true,
- weekSwitch: false,
- ismulti: false,
- monFirst: true,
- clean: false,
- lunar: false,
- renderValues: [],
- monthRange: [],
- current: false,
- where: {
- start: "",
- stop: "",
- type: ""
- },
- types: "",
- time: "",
- title: "",
- growth_rate: "",
- increase_time: "",
- increase_time_status: "",
- time_price: "",
- loaded: false,
- loading: false,
- filter: {
- page: 1,
- limit: 10,
- start: "",
- stop: ""
- },
- list: [],
-
- cWidth: '',
- cHeight: '',
- pixelRatio: 1,
- textarea: '',
- "LineA": {
- "categories": ["2012", "2013", "2014", "2015", "2016", "2017"],
- "series": [{
- "data": [35, 8, 25, 37, 4, 20]
- }]
- },
- info: {
- startDate: '',
- endDate: '',
- lunar: false,
- range: true,
- insert: false,
- selected: [],
- showMonth:false
- },
- type: '',
- before: '',
- after: ''
- };
- },
- watch: {
- "$route.params": function(newVal) {
- var that = this;
- if (newVal != undefined) {
- that.setType(newVal.type);
- that.setTime(newVal.time);
- that.getIndex();
- }
- }
- },
- onLoad: function(options) {
- this.type = options.type;
- if (options.before) {
- this.before = options.before;
- }
- if (options.after) {
- this.after = options.after;
- }
- this.setType(options.type);
- this.setTime(options.time);
- this.cWidth = uni.upx2px(690);
- this.cHeight = uni.upx2px(500);
-
-
- this.getInfo();
-
-
-
- },
- computed: {
- monthRangeText() {
- return this.monthRange.length ? "固定" : "指定范围";
- }
- },
- methods: {
- getIndex: function() {
- let tempDay = []
- let tempNum = []
- var that = this;
- getStatisticsTime(that.where).then(
- res => {
- var _info = res.data.chart,
- day = [],
- num = [];
- _info.forEach(function(item) {
- day.push(item.time);
- num.push(item.num);
- });
- that.growth_rate = res.data.growth_rate;
- that.increase_time = res.data.increase_time;
- that.increase_time_status = res.data.increase_time_status;
- that.time_price = res.data.time;
- res.data.chart.forEach((item, index) => {
- tempDay.push(item.time)
- tempNum.push(item.num)
- })
- that.LineA.categories = tempDay
- that.LineA.series[0].data = tempNum
- that.showLineA("canvasLineA", that.LineA);
- },
- error => {
- that.$util.Tips({
- title: error
- })
- }
- );
- },
- setTime: function(time) {
- let self = this
- this.time = time;
- var year = new Date().getFullYear(),
- month = new Date().getMonth() + 1,
- day = new Date().getDate();
- this.list = [];
- this.filter.page = 1;
- this.loaded = false;
- this.loading = false;
- switch (time) {
- case "today":
- this.where.start =
- new Date(Date.parse(year + "/" + month + "/" + day)).getTime() /
- 1000;
- this.where.stop =
- new Date(Date.parse(year + "/" + month + "/" + day)).getTime() /
- 1000 +
- 24 * 60 * 60 -
- 1;
- this.title = "今日";
- this.getIndex();
- this.getInfo();
- break;
- case "yesterday":
- this.where.start =
- new Date(Date.parse(year + "/" + month + "/" + day)).getTime() /
- 1000 -
- 24 * 60 * 60;
- this.where.stop =
- new Date(Date.parse(year + "/" + month + "/" + day)).getTime() /
- 1000 -
- 1;
- this.title = "昨日";
- this.getIndex();
- this.getInfo();
- break;
- case "month":
- this.where.start =
- new Date(year, new Date().getMonth(), 1).getTime() / 1000;
- this.where.stop = new Date(year, month, 1).getTime() / 1000 - 1;
- this.title = "本月";
- this.getIndex();
- this.getInfo();
- break;
- case "seven":
- this.where.start =
- new Date(Date.parse(year + "/" + month + "/" + day)).getTime() /
- 1000 +
- 24 * 60 * 60 -
- 7 * 3600 * 24;
- this.where.stop =
- new Date(Date.parse(year + "/" + month + "/" + day)).getTime() /
- 1000 +
- 24 * 60 * 60 -
- 1;
- this.title = "七日";
- this.getIndex();
- this.getInfo();
- break;
-
- case "date":
- let star = new Date(self.before).getTime()/1000
- let stop = new Date(self.after).getTime()/1000
- self.where.start = star
- self.where.stop = stop
- Promise.all([self.getIndex(),self.getInfo()]);
- break;
-
- }
- },
- setType: function(type) {
- switch (type) {
- case "price":
- this.where.type = 1;
- break;
- case "order":
- this.where.type = 2;
- break;
- }
- },
- dateTitle: function() {
-
- this.$refs.calendar.open()
- this.time = 'date'
-
-
- uni.navigateTo({
- url: '/pages/admin/custom_date/index?type=' + this.type
- });
-
-
- },
- close: function() {
- this.current = false;
- },
- getInfo: function() {
- var that = this;
- if (that.loading || that.loaded) return;
- that.loading = true;
- that.filter.start = that.where.start;
- that.filter.stop = that.where.stop;
- getStatisticsMonth(that.filter).then(
- res => {
- that.loading = false;
- that.loaded = res.data.length < that.filter.limit;
- that.list.push.apply(that.list, res.data);
- that.filter.page = that.filter.page + 1;
- },
- error => {
- that.$util.Tips({
- title: error
- })
- }
- );
- },
-
- showLineA(canvasId, chartData) {
- let _self = this
- canvaLineA = new uCharts({
- $this: _self,
- canvasId: canvasId,
- type: 'line',
- fontSize: 11,
- padding: [15, 15, 0, 15],
- legend: {
- show: false,
- padding: 5,
- lineHeight: 11,
- margin: 5,
- },
- dataLabel: true,
- dataPointShape: true,
- dataPointShapeType: 'hollow',
- background: '#FFFFFF',
- pixelRatio: _self.pixelRatio,
- categories: chartData.categories,
- series: chartData.series,
- animation: true,
- enableScroll: true,
- xAxis: {
- disableGrid: false,
- type: 'grid',
- gridType: 'dash',
- itemCount: 4,
- scrollShow: true,
- scrollAlign: 'left'
- },
- yAxis: {
-
- gridType: 'dash',
- splitNumber: 8,
- min: 0,
- max: 30,
- format: (val) => {
- return val.toFixed(0)
- }
- },
- width: _self.cWidth * _self.pixelRatio,
- height: _self.cHeight * _self.pixelRatio,
- extra: {
- line: {
- type: 'straight'
- }
- },
- });
- },
-
- touchLineA(e) {
- canvaLineA.scrollStart(e);
- },
- moveLineA(e) {
- canvaLineA.scroll(e);
- },
- touchEndLineA(e) {
- canvaLineA.scrollEnd(e);
- },
-
- confirm(e) {
- let self = this
- if(e.range.after && e.range.before){
- let star = new Date(e.range.before+' 00:00:00').getTime()/1000
- let stop = new Date(e.range.after+' 23:59:59').getTime()/1000
- self.where.start = star
- self.where.stop = stop
- self.list = [];
- self.filter.page = 1;
- self.loaded = false;
- self.loading = false;
- Promise.all([self.getIndex(),self.getInfo()]);
- }
- },
- },
- onReachBottom() {
- this.getInfo();
- }
- };
- </script>
- <style>
-
- .statistical-page .navs {
- width: 100%;
- height: 96upx;
- background-color: #fff;
- overflow: hidden;
- line-height: 96upx;
- position: fixed;
- top: 0;
- left: 0;
- z-index: 9;
- }
- .statistical-page .navs .list {
- overflow-y: hidden;
- overflow-x: auto;
- white-space: nowrap;
- -webkit-overflow-scrolling: touch;
- width: 100%;
- }
- .statistical-page .navs .item {
- font-size: 32upx;
- color: #282828;
- margin-left: 60upx;
- display: inline-block;
- }
- .statistical-page .navs .item.on {
- color: #2291f8;
- }
- .statistical-page .navs .item .iconfont {
- font-size: 25upx;
- margin-left: 13upx;
- }
- .statistical-page .wrapper {
- width: 740upx;
- background-color: #fff;
- border-radius: 10upx;
- margin: 119upx auto 0 auto;
- padding: 50upx 60upx;
- }
- .statistical-page .wrapper .title {
- font-size: 30upx;
- color: #999;
- text-align: center;
- }
- .statistical-page .wrapper .money {
- font-size: 72upx;
- color: #fba02a;
- text-align: center;
- margin-top: 10upx;
- }
- .statistical-page .wrapper .increase {
- font-size: 28upx;
- color: #999;
- margin-top: 20upx;
- }
- .statistical-page .wrapper .increase .red {
- color: #ff6969;
- }
- .statistical-page .wrapper .increase .green {
- color: #1abb1d;
- }
- .statistical-page .wrapper .increase .iconfont {
- font-size: 23upx;
- margin-left: 15upx;
- }
- .statistical-page .chart {
- width: 690upx;
- background-color: #fff;
- border-radius: 10upx;
- margin: 23upx auto 0 auto;
-
- }
-
- .statistical-page .chart .chart-title{
- padding:20upx 20upx 10upx;
- font-size: 26upx;
- color: #999;
- }
- .statistical-page .chart canvas {
- width: 100%;
- height: 530rpx;
- }
- .statistical-page .chart .company {
- font-size: 26upx;
- color: #999;
- }
- .yd-confirm {
- background-color: #fff;
- font-size: unset;
- width: 540upx;
- height: 250upx;
- border-radius: 40upx;
- }
- .yd-confirm-hd {
- text-align: center;
- }
- .yd-confirm-title {
- color: #030303;
- font-weight: bold;
- font-size: 36upx;
- }
- .yd-confirm-bd {
- text-align: center;
- font-size: 28upx;
- color: #333333;
- }
- .yd-confirm-ft {
- line-height: 90upx;
- margin-top: 14px;
- border-top: 1upx solid #eee;
- }
- .yd-confirm-ft>a {
- color: #e93323;
- }
- .yd-confirm-ft>a.primary {
- border-left: 1upx solid #eee;
- color: #e93323;
- }
- .echarts {
- width: 100%;
- height: 550upx;
- }
- .calendar-wrapper {
- position: fixed;
- bottom: 0;
- left: 0;
- width: 100%;
- z-index: 777;
- transform: translate3d(0, 100%, 0);
- transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
- }
- .calendar-wrapper.on {
- transform: translate3d(0, 0, 0);
- }
- .statistical-page .wrapper .increase {
- font-size: 26upx;
- }
- .statistical-page .wrapper .increase .iconfont {
- margin-left: 0;
- }
- .public-wrapper .title {
- font-size: 30upx;
- color: #282828;
- padding: 0 30upx;
- margin-bottom: 20upx;
- }
- .public-wrapper .title .iconfont {
- color: #2291f8;
- font-size: 40upx;
- margin-right: 13upx;
- vertical-align: middle;
- }
- .public-wrapper {
- margin: 18upx auto 0 auto;
- width: 690upx;
- background-color: #fff;
- border-radius: 10upx;
- padding-top: 25upx;
- }
- .public-wrapper .nav {
- padding: 0 30upx;
- height: 70upx;
- line-height: 70upx;
- font-size: 24upx;
- color: #999;
- }
- .public-wrapper .data {
- width: 210upx;
- text-align: left;
- }
- .public-wrapper .browse {
- width: 192upx;
- text-align: right;
- }
- .public-wrapper .turnover {
- width: 227upx;
- text-align: right;
- }
- .public-wrapper .conter {
- padding: 0 30upx;
- }
- .public-wrapper .conter .item {
- border-bottom: 1px solid #f7f7f7;
- height: 70upx;
- font-size: 24upx;
- }
- .public-wrapper .conter .item .turnover {
- color: #d84242;
- }
- </style>
|