jdt-mer/src/views/order/pengding_order_data/index.vue

<template>
  <CommonPage show-footer :title="$route.title">
    <n-grid mb-10 flex items-center x-gap="10" :y-gap="8" :cols="3">
      <n-gi>
        <!-- {{ queryData }} -->
        <div flex items-center>
          <span w-120>时间筛选：</span>
          <n-date-picker
            v-model:formatted-value="queryData.time"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetimerange"
            clearable
          />
        </div>
      </n-gi>
      <n-gi>
        <div>
          <n-button type="primary" @click="get_data">搜索</n-button>
          <n-button ml-10 @click="clear">重置</n-button>
        </div>
      </n-gi>
    </n-grid>
    <n-card mb-5 rounded-5 title="营业额汇总">
      <n-grid x-gap="10" :y-gap="8" :cols="4">
        <n-gi>
          <n-card rounded-5 style="background-color: #5579e9">
            <n-statistic label="应收金额（元）" tabular-nums>
              <n-number-animation :from="0" :to="cardData.payments" :precision="2" />
            </n-statistic>
          </n-card>
        </n-gi>
        <n-gi>
          <n-card rounded-5 style="background-color: #e74f5b">
            <n-statistic label="实收金额（条）" tabular-nums>
              <n-number-animation :from="0" :to="cardData.payAmount" :precision="2" />
            </n-statistic>
          </n-card>
        </n-gi>
        <n-gi>
          <n-card rounded-5 style="background-color: #00b4c3">
            <n-statistic label="促销积分" tabular-nums>
              <n-number-animation :from="0" :to="cardData.integral" :precision="2" />
            </n-statistic>
          </n-card>
        </n-gi>
        <n-gi>
          <n-card rounded-5 style="background-color: #e74f5b">
            <n-statistic label="订单数量（条）" tabular-nums>
              <n-number-animation :from="0" :to="cardData.total" />
            </n-statistic>
          </n-card>
        </n-gi>
        <n-gi>
          <n-card rounded-5 style="background-color: #2c5ba9">
            <n-statistic label="挂帐（元）" tabular-nums>
              <n-number-animation :from="0" :to="cardData.onAccount" :precision="2" />
            </n-statistic>
          </n-card>
        </n-gi>
        <n-gi>
          <n-card rounded-5 style="background-color: #f0727d">
            <n-statistic label="赠送豆子（个）" tabular-nums>
              <n-number-animation :from="0" :to="cardData.total_pulse" />
            </n-statistic>
          </n-card>
        </n-gi>
        <n-gi>
          <n-card rounded-5 style="background-color: #797979">
            <n-statistic label="抹零（元）" tabular-nums>
              <n-number-animation :from="0" :to="cardData.zero" :precision="2" />
            </n-statistic>
          </n-card>
        </n-gi>
      </n-grid>
    </n-card>
    <n-card rounded-5 title="商品类别汇总（元）">
      <Echarts :loading="loading" :option="option" />
    </n-card>
  </CommonPage>
</template>

<script setup>
import api from './api'
import Echarts from '@/components/Echarts.vue'

const cardData = ref({})

const loading = ref(false)

const queryData = ref({
  time: null,
})

const option = ref({
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
    },
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true,
  },
  xAxis: {
    type: 'category',
    data: [],
  },
  yAxis: {
    type: 'value',
  },
  series: [
    {
      data: [],
      type: 'bar',
      barWidth: '10%',
      name: '金额（元）',
      label: {
        show: true,
        position: 'top',
        formatter: function (value) {
          return `¥${value.data}元`
        },
      },
    },
  ],
  dataZoom: [
    {
      type: 'inside',
    },
    {
      type: 'slider',
    },
  ],
})

onMounted(() => {
  get_data()
})

const get_data = async () => {
  loading.value = true
  option.value.xAxis.data = []
  option.value.series[0].data = []
  const query_data = {
    StartTime: queryData.value.time === null ? '' : queryData.value.time[0] || '',
    EndTime: queryData.value.time === null ? '' : queryData.value.time[1] || '',
  }
  const res = await api.getData(query_data)
  cardData.value = res.data
  for (let i = 0; i < res.data.data.length; i++) {
    option.value.xAxis.data.push(res.data.data[i].Name)
    option.value.series[0].data.push(res.data.data[i].Price)
  }
  console.log(cardData.value)
  loading.value = false
}

const clear = async () => {
  queryData.value.time = null
  get_data()
}
</script>

<style lang="scss" scoped>
:deep(.n-statistic__label) {
  color: #fff !important;
  font-size: 16px;
}
:deep(.n-statistic-value__content) {
  color: #fff !important;
  font-size: 16px;
}

.chart {
  width: 100%;
  height: 150rem;
}
</style>