123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257 |
- <template>
- <view class="echart-content">
- <view class="echart-title">
- <view class="e-icon e2"><text class="iconfont icon-dingdan"></text></view> <view class="e-name">订单</view>
- </view>
- <view class="echart-search">
- <view class="echart-search-text">
- <view class="search-text">所有:<text>¥{{ orderTotalAmount }}({{ orderTotal }}个)</text></view>
- <view class="search-text">当前范围:<text>¥{{ orderData.orderScopeTotalFee }}({{ orderData.orderScopeNum }}个)</text></view>
- </view>
- <view class="echart-search-date">
- <view class="echart-search-date-input">
- <picker
- mode="date"
- :value="date"
- :start="startDate"
- :end="endDate"
- @change="bindStartDateChange($event, 0)"
- >
- <text class="input-text">{{ orderData.startTime }}</text>
- </picker>
- <text class="iconfont icon-riqi"></text>
- </view>
- <view class="line">-</view>
- <view class="echart-search-date-input">
- <picker
- mode="date"
- :value="date"
- :start="startDate"
- :end="endDate"
- @change="bindEndDateChange($event, 0)"
- >
- <text class="input-text">{{ orderData.endTime }}</text>
- </picker>
- <text class="iconfont icon-riqi"></text>
- </view>
- </view>
- <view class="echart-search-time">
- <view
- class="time-tab"
- v-for="(time, index) in timeList"
- :class="{ current: current === index }"
- :key="index"
- @click="handleTimeClick(time.current, index, 0)"
- >{{ time.label }}</view
- >
- </view>
- </view>
- <view class="echart-mains">
- <view class="echart-mains-none" v-if="isEmpty">
- <image
- class="none-image"
- src="https://static.caimei365.com/app/img/bg/icon_echart_none@2x.png"
- mode=""
- ></image>
- <view class="none-text">暂无数据</view>
- </view>
- <view class="echart-mains-data" v-else>
- <qiun-data-charts type="pie" :opts="opts" :chartData="orderChartData" :errorShow="false" />
- </view>
- </view>
- </view>
- </template>
- <script>
- import { mapState, mapMutations } from 'vuex'
- import chartMixin from './mixins/chart.mixin.js'
- export default {
- mixins: [chartMixin],
- props:{
- clubId:{
- type:Number,
- default:0
- },
- totalAmount:{
- type:Number,
- default:0
- },
- totalNum:{
- type:Number,
- default:0
- }
- },
- data() {
- return {
- isEmpty:false,
- current: 0,
- orderChartData:null,
- orderTotal:0,
- orderTotalAmount:0,
- orderData:{
- startTime: '',
- endTime: '',
- orderScopeNum:0,
- orderScopeTotalFee:0,
- },
- params:{
- clubId:0,// 机构id
- dateType:3,// 日期类别 0日 1月 2半年 3全年
- startTime:'',// 开始时间
- endTime:'',// 结束时间
- type:0 // 统计类别 0订单 1搜索关键词 2咨询记录 3访问记录 4初始状态
- },
- opts: {
- timing: 'easeOut',
- duration: 50,
- rotate: false,
- rotateLock: false,
- color: [
- '#1890FF',
- '#91CB74',
- '#FAC858',
- '#EE6666',
- '#73C0DE',
- '#3CA272',
- '#FC8452',
- '#9A60B4',
- '#ea7ccc'
- ],
- padding: [5, 5, 5, 5],
- fontSize: 13,
- fontColor: '#666666',
- dataLabel: true,
- dataPointShape: true,
- dataPointShapeType: 'solid',
- touchMoveLimit: 60,
- enableScroll: false,
- enableMarkLine: false,
- legend: {
- show: false,
- position: 'bottom',
- lineHeight: 25,
- float: 'bottom',
- padding: 5,
- margin: 5,
- backgroundColor: 'rgba(0,0,0,0)',
- borderColor: 'rgba(0,0,0,0)',
- borderWidth: 0,
- fontSize: 12,
- fontColor: '#666666',
- hiddenColor: '#CECECE',
- itemGap: 10
- },
- title: {
- name: '订单总量',
- fontSize: 12,
- color: '#666666',
- offsetX: 0,
- offsetY: 0
- },
- subtitle: {
- name: '70%',
- fontSize: 12,
- color: '#7cb5ec',
- offsetX: 0,
- offsetY: 0
- },
- extra: {
- pie:{
- activeOpacity: 0.5,
- activeRadius: 10,
- offsetAngle: 0,
- labelWidth: 15,
- border: true,
- borderWidth: 3,
- borderColor: "#FFFFFF",
- customRadius: 60,
- linearType: "none"
- },
- tooltip: {
- showBox: true,
- showArrow: true,
- showCategory: false,
- borderWidth: 0,
- borderRadius: 0,
- borderColor: '#000000',
- borderOpacity: 0.7,
- bgColor: '#000000',
- bgOpacity: 0.7,
- gridType: 'solid',
- dashLength: 4,
- gridColor: '#CCCCCC',
- boxPadding: 3,
- fontSize: 12,
- lineHeight: 20,
- fontColor: '#FFFFFF',
- legendShow: true,
- legendShape: 'auto',
- splitLine: true,
- horizentalLine: false,
- xAxisLabel: false,
- yAxisLabel: false,
- labelBgColor: '#FFFFFF',
- labelBgOpacity: 0.7,
- labelFontColor: '#666666'
- }
- }
- }
- }
- },
- created() {
- this.params.clubId = this.clubId
- console.log('orderTotal',this.orderTotal)
- this.orderTotal = this.totalNum
- this.orderTotalAmount = this.totalAmount
- this.userClubPortrait(0)
- },
- methods: {
- handleTimeClick(dateType,index,type) {
- //年月日点击
- console.log('dateType', dateType)
- this.current = index
- this.params.dateType = dateType
- this.params.startTime = ''
- this.params.endTime = ''
- this.userClubPortrait(type)
- },
- async userClubPortrait(type){
- this.params.type = type
- try {
- const res = await this.UserService.userClubPortrait(this.params)
- const data = res.data
- this.orderData.orderScopeNum = data.portrait.orderScopeNum
- this.orderData.orderScopeTotalFee = data.portrait.orderScopeTotalFee
- this.orderData.startTime = this.params.startTime = data.portrait.startTime
- this.orderData.endTime = this.params.endTime = data.portrait.endTime
- if(data.order){
- this.isEmpty = false
- this.getSetOrderData(data.order)
- }else{
- this.isEmpty = true
- }
- } catch (error) {
- this.$util.msg(error.msg, 2000)
- }
- },
- getSetOrderData(data) {
- //模拟从服务器获取数据时的延时
- setTimeout(() => {
- //模拟服务器返回数据,如果数据格式和标准格式不同,需自行按下面的格式拼接
- let res = {
- series: [
- {
- format: 'pieDemo1',
- data: data.orderList
- }
- ]
- }
- this.orderChartData = JSON.parse(JSON.stringify(res))
- }, 500)
- }
- },
- onShow() {}
- }
- </script>
- <style lang="scss"></style>
|