| | |
| | | <template> |
| | | <TableLayout> |
| | | <div slot="search-form" class="data"> |
| | | <div class="item-title">æ°æ®çæ¿</div> |
| | | <div class="top-tab"> |
| | | <div class="tab-title">ç»è¥æ°æ®åæ</div> |
| | | <div class="tab-item"> |
| | | <span v-for="(item,index) in tabs" :key="'tab'+index" :class="item.index==tabIndex?'active-tab tab-btn':'tab-btn'" @click="changeTab(item)">{{item.name}}</span> |
| | | </div> |
| | | </div> |
| | | <div class="item-title"> </div> |
| | | <div class="data-summary"> |
| | | <div class="data-item"> |
| | | <div>ä¼åæ°é</div> |
| | | <div class="data-num">{{ countData.users }}</div> |
| | | <div class="data-item blue"> |
| | | <div>{{tabName}}éå®é¢</div> |
| | | <div class="data-num">ï¿¥{{ (countData.totalPrice ||0).toFixed(2) }}</div> |
| | | </div> |
| | | <div class="parting"></div> |
| | | <div class="data-item"> |
| | | <div>仿¥æ´»è·ç¨æ·</div> |
| | | <div class="data-num">{{ countData.activeUsers }}</div> |
| | | <div class="data-item yellow"> |
| | | <div>{{tabName}}æäº¤è®¢åé</div> |
| | | <div class="data-num">{{ countData.totalNum ||0}}</div> |
| | | </div> |
| | | <div class="parting"></div> |
| | | <div class="data-item"> |
| | | <div>è®¢åæ»æ°</div> |
| | | <div class="data-num">{{ countData.orders }}</div> |
| | | <div class="data-item green"> |
| | | <div>{{tabName}}鿬¾éé¢</div> |
| | | <div class="data-num">ï¿¥{{( countData.totalRefundPrice ||0).toFixed(2) }}</div> |
| | | </div> |
| | | <div class="parting"></div> |
| | | <div class="data-item"> |
| | | <div>è®¢åæ»éé¢</div> |
| | | <div class="data-num">{{ countData.money }}</div> |
| | | <div class="data-item orange"> |
| | | <div>{{tabName}}鿬¾è®¢åé</div> |
| | | <div class="data-num">{{ countData.totalRefundNum ||0 }}</div> |
| | | </div> |
| | | <div class="parting"></div> |
| | | <div class="data-item"> |
| | | <div>æ¬æè®¢åæ°</div> |
| | | <div class="data-num">{{ countData.mouthOrders }}</div> |
| | | </div> |
| | | <div class="parting"></div> |
| | | <div class="data-item"> |
| | | <div>æ¬æè®¢åæ»éé¢</div> |
| | | <div class="data-num">{{ countData.mouthMoney }}</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <template v-slot:table-wrap> |
| | | <div class="change-style"> |
| | | <div class="item-title">订åéé¢è¶å¿</div> |
| | | <div style="display: flex;"> |
| | | <el-button type="text" @click="changeCount(7)">7æ¥</el-button> |
| | | <div style="margin: 0 5px;">|</div> |
| | | <el-button type="text" @click="changeCount(30)">30æ¥</el-button> |
| | | <div class="count-left"> |
| | | <div class="item-title">订åéä¸éå®é¢è¶å¿</div> |
| | | <div ref="orderCount" class="bottom"></div> |
| | | </div> |
| | | <div class="count-right"> |
| | | <div class="item-title">ååç±»éå®é¢å æ¯</div> |
| | | <div ref="cateCount" class="bottom"></div> |
| | | </div> |
| | | </div> |
| | | <div ref="orderChange" class="bottom"> |
| | | |
| | | <div class="change-style"> |
| | | <div class="tab-title" style="display: flex;align-items: center; "> |
| | | <span style="">æååæ</span> |
| | | <div class="tab-item" style="margin-left: 20px;" > |
| | | <el-date-picker style="width: 110px;height: 22px;margin-right: 10px;" v-model="searchForm.topYear" type="year" |
| | | clearable value-format="yyyy" format="yyyy'年'" placeholder="年份" ></el-date-picker> |
| | | <el-date-picker style="width: 100px;height: 22px;" v-model="searchForm.topMonth" type="month" |
| | | clearable value-format="MM" format="MM'æ'" placeholder="æä»½" ></el-date-picker> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="change-style"> |
| | | <div class="count-left"> |
| | | <div class="item-title" style="display: flex;"> |
| | | <span style="flex: 1">ç»éåIOP10</span> |
| | | <div class="tab-item" style="text-align: right;flex: 1.5; "> |
| | | <span v-for="(item,index) in tabs1" :key="'tab'+index" :class="item.index==tabIndex1?'active-tab tab-btn':'tab-btn'" @click="changeTab1(item)">{{item.name}}</span> |
| | | </div> |
| | | </div> |
| | | <div class="bottom1"> |
| | | <el-table :data="dataList1||[]" stripe border inline > |
| | | <el-table-column prop="sortnum" label="æå" align="center"> |
| | | <template slot-scope="scope">{{scope.$index +1}}</template> |
| | | </el-table-column> |
| | | <el-table-column prop="name" label="ç»éååç§°" align="center" > </el-table-column> |
| | | <el-table-column prop="num" label="订åé" align="center" > </el-table-column> |
| | | <el-table-column prop="price" label="éå®é¢ï¼å
ï¼" align="center" ></el-table-column> |
| | | <el-table-column prop="num2" label="ä¼åæ°" align="center" ></el-table-column> |
| | | </el-table> |
| | | </div> |
| | | </div> |
| | | <div class="count-right"> |
| | | <div class="item-title"> |
| | | <div class="item-title" style="display: flex;"> |
| | | <span style="flex: 1">åä¸ååTOP10</span> |
| | | <div class="tab-item" style="text-align: right;flex: 1.5; "> |
| | | <span v-for="(item,index) in tabs2" :key="'tab'+index" :class="item.index==tabIndex2?'active-tab tab-btn':'tab-btn'" @click="changeTab2(item)">{{item.name}}</span> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="bottom1"> |
| | | <el-table :data="dataList2||[]" stripe border > |
| | | <el-table-column prop="sortnum" label="æå" align="center"> |
| | | <template slot-scope="scope">{{scope.$index +1}}</template> |
| | | </el-table-column> |
| | | <el-table-column prop="name" label="åååç§°" align="center" > </el-table-column> |
| | | <el-table-column prop="num" label="éé" align="center" > </el-table-column> |
| | | <el-table-column prop="price" label="éå®é¢ï¼å
ï¼" align="center" ></el-table-column> |
| | | </el-table> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="change-style"> |
| | | <div class="tab-title" style="display: flex;align-items: center; "> |
| | | <span style="">è¥éæ°æ®åæ</span> |
| | | <div class="tab-item" style="margin-left: 20px;" > |
| | | <el-date-picker style="width: 110px;height: 22px;margin-right: 10px;" v-model="searchForm.topYear2" type="year" |
| | | clearable value-format="yyyy" format="yyyy'年'" placeholder="年份" ></el-date-picker> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="change-style"> |
| | | <div class="count-left"> |
| | | <div class="item-title">积ååæ¾ç±»åå æ¯</div> |
| | | <div class="bottom2" style="display: flex"> |
| | | <div ref="integralCount" style="flex: 1"></div> |
| | | <div style="flex: 1;font-size: 14px;font-weight: 500;"> |
| | | <div>累计æ¶èï¼{{10000}}</div> |
| | | <div>ç´¯è®¡ä¼æ éé¢ï¼ï¿¥{{10000 }}</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="count-right"> |
| | | <div class="item-title">伿 å¸åæ¾ç±»åå æ¯</div> |
| | | <div class="bottom2"> |
| | | <div class="bottom2" style="display: flex"> |
| | | <div ref="couponCount" style="flex: 1"></div> |
| | | <div style="flex: 1;font-size: 14px;font-weight: 500;"> |
| | | <div>已使ç¨ä¼æ å¸ï¼{{10000}}</div> |
| | | <div>ç´¯è®¡ä¼æ éé¢ï¼ï¿¥{{10000 }}</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="change-style" v-if="1==2"> |
| | | <div class="item-title">è¥éæå
¥è´¹ç¨ä¸éå®é¢åæ</div> |
| | | <div ref="feeCount" class="bottom"></div> |
| | | </div> |
| | | </template> |
| | | |
| | | |
| | | </TableLayout> |
| | | </template> |
| | | |
| | | <script> |
| | | import TableLayout from '@/layouts/TableLayout' |
| | | import * as echarts from 'echarts'; |
| | | import { findAllList, createCoffeeTask } from '@/api/business/taskRule' |
| | | import * as echarts from 'echarts' |
| | | export default { |
| | | components: { |
| | | TableLayout |
| | | }, |
| | | data() { |
| | | data () { |
| | | return { |
| | | countData: { |
| | | users: 1000, |
| | | activeUsers: 1000, |
| | | mouthOrders: 10, |
| | | mouthMoney: 100000, |
| | | orders: 10, |
| | | money: 100000 |
| | | tabs2: [{ index: 0, name: 'æéé' }, { index: 1, name: 'æéå®é¢' } ], |
| | | tabs1: [{ index: 0, name: 'æè®¢åé' }, { index: 1, name: 'æéå®é¢' }, { index: 2, name: 'æä¼åæ°' }], |
| | | tabs: [{ index: 0, name: '仿¥' }, { index: 1, name: 'è¿7æ¥' }, { index: 2, name: 'è¿30æ¥' }, { index: 3, name: 'è¿1å¹´' }], |
| | | tabName: '仿¥', |
| | | tabIndex: 0, |
| | | tabIndex1: 0, |
| | | tabIndex2: 0, |
| | | searchForm:{ |
| | | topYear:null, |
| | | topMonth:null, |
| | | topYear2:null, |
| | | }, |
| | | orderCorderCount: [10,10,20,10,40,10,30], |
| | | countData: { |
| | | totalPrice: 1000, |
| | | totalNum: 1000, |
| | | totalRefundPrice: 10000, |
| | | totalRefundNum: 100 |
| | | }, |
| | | dataList1:[], |
| | | dataList2:[], |
| | | orderCorderCount: [10, 10, 20, 10, 40, 10, 30], |
| | | opinionData: ['3.20', '3.21', '3.22', '3.23', '3.24', '3.25', '3.26'], |
| | | myChart: null |
| | | myChart0: null, |
| | | myChart1: null |
| | | } |
| | | }, |
| | | mounted() { |
| | | this.myChart = echarts.init(this.$refs.orderChange) |
| | | window.addEventListener('resize', () => { |
| | | this.myChart.resize() |
| | | }) |
| | | this.renderOrderChange() |
| | | findAllList({}) |
| | | |
| | | mounted () { |
| | | this.initCountData() |
| | | }, |
| | | methods: { |
| | | renderOrderChange() { |
| | | this.myChart.setOption({ |
| | | initCountData () { |
| | | this.myChart0 = echarts.init(this.$refs.orderCount) |
| | | window.addEventListener('resize', () => { |
| | | this.myChart0.resize() |
| | | }) |
| | | this.myChart1 = echarts.init(this.$refs.cateCount) |
| | | window.addEventListener('resize', () => { |
| | | this.myChart1.resize() |
| | | }) |
| | | this.renderOrderChange(this.myChart0) |
| | | this.renderOrderChange(this.myChart1) |
| | | }, |
| | | changeTab (item) { |
| | | this.tabName = item.name |
| | | this.tabIndex = item.index |
| | | }, |
| | | changeTab1 (item) { |
| | | this.tabIndex1 = item.index |
| | | }, |
| | | changeTab2 (item) { |
| | | this.tabIndex2 = item.index |
| | | }, |
| | | renderOrderChange (chart) { |
| | | chart.setOption({ |
| | | tooltip: { |
| | | trigger: 'axis' |
| | | }, |
| | |
| | | }, |
| | | toolbox: { |
| | | feature: { |
| | | |
| | | |
| | | } |
| | | }, |
| | | xAxis: { |
| | |
| | | data: this.orderCorderCount |
| | | }] |
| | | }) |
| | | |
| | | }, |
| | | changeCount(page) { |
| | | changeCount (page) { |
| | | if (page == 7) { |
| | | this.orderCorderCount = [10,10,20,10,40,10,30] |
| | | this.orderCorderCount = [10, 10, 20, 10, 40, 10, 30] |
| | | this.opinionData = ['3.20', '3.21', '3.22', '3.23', '3.24', '3.25', '3.26'] |
| | | } else { |
| | | this.orderCorderCount = [11,10,20,10,40,10,30,20,10,20,10,40,10,30,10,10,20,10,40,10,30,10,10,20,10,40,10,30,20,40] |
| | | this.opinionData = ['3.01','3.02','3.03','3.04','3.05','3.06','3.07','3.08','3.09','3.10','3.11','3.12','3.13','3.14','3.15','3.16','3.17','3.18','3.19','3.20', '3.21', '3.22', '3.23', '3.24', '3.25', '3.26', '3.27','3.28','3.28','3.30',] |
| | | this.orderCorderCount = [11, 10, 20, 10, 40, 10, 30, 20, 10, 20, 10, 40, 10, 30, 10, 10, 20, 10, 40, 10, 30, 10, 10, 20, 10, 40, 10, 30, 20, 40] |
| | | this.opinionData = ['3.01', '3.02', '3.03', '3.04', '3.05', '3.06', '3.07', '3.08', '3.09', '3.10', '3.11', '3.12', '3.13', '3.14', '3.15', '3.16', '3.17', '3.18', '3.19', '3.20', '3.21', '3.22', '3.23', '3.24', '3.25', '3.26', '3.27', '3.28', '3.28', '3.30'] |
| | | } |
| | | // this.orderCorderCount.push(1) |
| | | // this.opinionData.push(1) |
| | | this.renderOrderChange() |
| | | |
| | | } |
| | | }, |
| | | } |
| | | } |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |
| | | ::v-deep .el-input--small .el-input__inner{ |
| | | height: 22px; |
| | | line-height: 22px; |
| | | border-radius: 0; |
| | | } |
| | | ::v-deep .el-input--small .el-input__icon{ |
| | | height: 22px; |
| | | line-height: 22px; |
| | | } |
| | | .top-tab{ |
| | | margin-bottom: 30px; |
| | | display: block; |
| | | } |
| | | .tab-title{ |
| | | font-weight: 600; |
| | | font-size: 16px; |
| | | color: #222222; |
| | | line-height: 22px; |
| | | display: inline; |
| | | } |
| | | .tab-item{ |
| | | display: inline; |
| | | margin-left: 50px; |
| | | .active-tab{ |
| | | border: 1px solid #216EEE !important; |
| | | color: #216EEE !important; |
| | | } |
| | | .tab-btn{ |
| | | font-weight: normal; |
| | | cursor: pointer; |
| | | border-radius: 0px; |
| | | margin: 0px 5px; |
| | | font-size: 12px; |
| | | border: 1px solid #999; |
| | | color: #999; |
| | | padding: 1px 5px; |
| | | background-color: #f2f2f2; |
| | | } |
| | | } |
| | | .data { |
| | | padding-bottom: 10px; |
| | | } |
| | | .item-title { |
| | | font-weight: 500; |
| | | |
| | | font-weight: 600; |
| | | font-size: 14px; |
| | | color: #222222; |
| | | margin-left: 20px; |
| | | line-height: 22px; |
| | | } |
| | | .data-summary { |
| | | display: flex; |
| | | justify-content: space-between; |
| | | margin-top: 10px; |
| | | margin-bottom: 20px; |
| | | .green{ |
| | | border-left: 8px solid #12bb8b; |
| | | } |
| | | .yellow{ |
| | | border-left: 8px solid #f6cf46; |
| | | } |
| | | .blue{ |
| | | border-left: 8px solid #216EEE; |
| | | } |
| | | .orange{ |
| | | border-left: 8px solid #ff9e56; |
| | | } |
| | | .data-item { |
| | | flex: 1; |
| | | height: 80px; |
| | |
| | | box-sizing: border-box; |
| | | padding: 15px; |
| | | display: flex; |
| | | font-size: 14px; |
| | | flex-direction: column; |
| | | justify-content: space-between; |
| | | background-color: #f4f7fc; |
| | | color: #666; |
| | | .data-num { |
| | | font-size: 20px; |
| | | font-weight: 700; |
| | | color:aqua |
| | | font-weight: 800; |
| | | color: #333; |
| | | } |
| | | } |
| | | .parting { |
| | |
| | | display: flex; |
| | | justify-content: space-between; |
| | | line-height: 31px; |
| | | } |
| | | .bottom { |
| | | height: 500px; |
| | | } |
| | | </style> |
| | | margin-bottom: 50px; |
| | | .count-left{ |
| | | display: inline-block; |
| | | margin-right: 10px; |
| | | flex: 1; |
| | | .bottom { |
| | | height: 500px; |
| | | width: 100%; |
| | | } |
| | | .bottom2 { |
| | | height: 300px; |
| | | width: 100%; |
| | | } |
| | | .bottom1 { |
| | | height: auto; |
| | | width: 100%; |
| | | } |
| | | } |
| | | .count-right{ |
| | | display: inline-block; |
| | | margin-left: 10px; |
| | | flex: 1; |
| | | .bottom { |
| | | height: 500px; |
| | | width: 100%; |
| | | } |
| | | .bottom2 { |
| | | height: 300px; |
| | | width: 100%; |
| | | } |
| | | .bottom1 { |
| | | height: auto; |
| | | width: 100%; |
| | | } |
| | | } |
| | | |
| | | } |
| | | |
| | | </style> |