scancode-miro/pages/hexiao/xiaoshou/index.vue

<template>
  <view class="container">
    <view class="title">
      <view class="title-text">{{title}}</view>
    </view>
    <view class="header">
      <view class="query">
        <u-row customStyle="margin-bottom: 10px" gutter="20">
          <u-col span="9">
            <u--input
                @focus="timeShow = true"
                v-model="startTimeXd"
                placeholder="开始日期 ~ 结束日期"
                prefixIcon="calendar"
                prefixIconStyle="font-size: 22px;color: #909399"
            ></u--input>
          </u-col>
          <u-col span="3">
            <view class="query-btn" @click="timeShow = !timeShow">
              <view class="query-btn-icon">
              </view>
              <view class="query-btn-text">筛选</view>
            </view>
          </u-col>
        </u-row>
      </view>
      <view class="filter">
        <view class="item-one">
          <view class="type-icon-hexiao"></view>
          <view class="type-data">
            <view class="number">{{hexiaoNumber}}</view>
            <view class="text">核销</view>
          </view>
        </view>
        <view class="item-one"  v-if="type === 2">
          <view class="type-icon-xundian"></view>
          <view class="type-data">
            <view class="number">{{ xundianNumber}}</view>
            <view class="text">巡店</view>
          </view>
        </view>
        <view class="item-one" v-if="type !== 3">
          <view class="type-icon-shanghuo"></view>
          <view class="type-data">
            <view class="number">{{ shangHuoNumber}}</view>
            <view class="text">上货</view>
          </view>
        </view>
        <view class="item-one" v-if="type === 3">
          <view class="type-icon-xiadan"></view>
          <view class="type-data">
            <view class="number">{{xiaDanNumber}}</view>
            <view class="text">下单</view>
          </view>
        </view>
      </view>
    </view>
    <view class="content">
      <view class="t-one">
        <view class="t-text">核销和上货趋势统计</view>
        <view class="charts-box"  v-show="!timeShow">
          <qiun-data-charts
              type="line"
              :opts="opts"
              :chartData="chartData"
          />
        </view>
      </view>
      <view class="t-one" v-show=" type == 2 && !timeShow">
        <view class="t-text">巡店统计</view>
        <view class="charts-box">
          <qiun-data-charts
              type="column"
              :opts="opts"
              :chartData="chartDataXd"
          />
        </view>
      </view>

    </view>
    <u-popup :show="show" mode="bottom"  @close="show = false" >
      <view class="popup-content">
        <view class="popup-text">筛选</view>
        <u-row customStyle="margin-bottom: 10px">
          <u-col span="3">
            <view class="explain">选择日期</view>
          </u-col>
          <u-col span="9">
            <u--input
                v-model="startTimeXd"
                placeholder="开始日期 ~ 结束日期"
                prefixIcon="calendar"
                prefixIconStyle="font-size: 22px;color: #909399"
                @focus="timeShow = true"
            ></u--input>
          </u-col>
        </u-row>
        <u-row customStyle="margin-bottom: 10px">
          <u-col span="3">
            <view class="explain">门店名称</view>
          </u-col>
          <u-col span="9">
            <u--input
                placeholder="请输入内容"
                border="surround"
            ></u--input>
          </u-col>
        </u-row>
        <u-row customStyle="margin-bottom: 10px">
          <u-col span="3">
            <view class="explain">业务员</view>
          </u-col>
          <u-col span="9">
            <u--input
                placeholder="请输入内容"
                border="surround"
            ></u--input>
          </u-col>
        </u-row>
        <u-row customStyle="margin-bottom: 10px">
          <u-col span="3">
            <view class="explain">订单编号</view>
          </u-col>
          <u-col span="9">
            <u--input
                placeholder="请输入内容"
                border="surround"
            ></u--input>
          </u-col>
        </u-row>
        <view class="popup-btn">
          <u-button  class="popup-btn-one">搜索</u-button>
          <u-button  class="popup-btn-one" type="primary">重置</u-button>
        </view>
      </view>

    </u-popup>
    <u-calendar :minDate="minDate"  :monthNumber="6"  :show="timeShow" :mode="mode" @confirm="confirm" @close="timeCalendar"></u-calendar>

  </view>

</template>

<script>
import {getSalesTotal,getSalesTrend,getSalesmanSalesTotal,getSalesmanSalesTrend,getSalesmanVisitTrend,getStoreSalesSummary,getStoreSalesTrend} from "../../../api/hexiao";
export default {
  data() {
    return {
      chartTitle: "核销和上货趋势统计",
      storeId: 0,
	    ywyId:0,
      minDate: new Date(new Date().setMonth(new Date().getMonth() - 2)),
      maxDate: new Date(),
      hexiaoNumber: 0,
      xundianNumber: 0,
      shangHuoNumber: 0,
      xiaDanNumber: 0,
      type: 1,
      title: '',
      startTime: '',
      endTime: '',
      startTimeXd: '',
      timeShow: false,
      mode: 'range',
      show: false,
      chartDataXd: {},
      chartData: {},
      //您可以通过修改 config-ucharts.js 文件中下标为 ['line'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
      opts: {
        height: 210,
        color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
        padding: [15,10,0,15],
        enableScroll: false,
        legend: {},
        xAxis: {
          disableGrid: true
        },
        yAxis: {
          gridType: "dash",
          dashLength: 2
        },
        extra: {
          line: {
            type: "straight",
            width: 2,
            activeType: "hollow"
          }
        }
      }
    };
  },
  onLoad: function(options) {
    //门店
    if (options.type == 1){
      this.title = '门店销售数据';
      this.type = 1;
      this.storeId = options.storeId;
      this.initMenDian();
    }
    //业务员
    if (options.type == 2){
      this.title = '业务员销售数据';
      this.type = 2;
      this.ywyId = options.ywyId;
      console.log(this.type);
      this.initYWY();
    }
    //经销商
    if (options.type == 3){
      this.title = '经销商销售数据';
      this.type = 3;
      this.initJXS();
    }
  },
  onReady() {
  },
  methods: {
    timeCalendar(){
      console.log('timeCalendar');
      this.timeShow = false;
    },
    initMenDian() {
      this.chartTitle = "核销和上货趋势统计";
      let  that = this;
      getStoreSalesSummary(this.startTime,this.endTime,this.storeId).then(res => {
        if (res.code === 0){
          that.hexiaoNumber = res.data.verificationTotal;
          that.shangHuoNumber = res.data.activateTotal;
        }
      }).catch(err => {
      });
      getStoreSalesTrend(this.startTime,this.endTime,this.storeId).then(resData => {
        if (resData.code === 0){
          let apiResponse = resData.data;
          // 提取日期列表并排序
          let categories = apiResponse.map(item => {
            // 从日期中提取月日，例如 "2025-08-01" -> "08-01" -> "8/1" 或者只显示日 "1"
            return item.date.split("-")[2]; // 这里提取日期中的日部分
          });

          // 排序日期列表
          categories.sort((a, b) => {
            return a.localeCompare(b);
          })

          // 按日期排序数据
          let sortedData = apiResponse.sort((a, b) => new Date(a.date) - new Date(b.date));

          // 提取核销数据和上货数据
          let verificationData = sortedData.map(item => item.verificationCount);
          let activateData = sortedData.map(item => item.activateCount);
          // 构造图表需要的格式
          let resTb = {
            categories: categories,
            series: [
              {
                name: "核销",
                data: verificationData
              },
              {
                name: "上货",
                data: activateData
              }
            ]
          };
          this.chartData = JSON.parse(JSON.stringify(resTb));
        }
      })

    },
    initYWY() {
        let  that = this;
        getSalesmanSalesTotal(this.startTime,this.endTime,this.ywyId).then(res => {
          if (res.code === 0){
            console.log(res.data);
            that.hexiaoNumber = res.data.verificationTotal;
            that.xundianNumber = res.data.visitTotal;
            that.shangHuoNumber = res.data.activateTotal;
          }
        }).catch(err => {

        });
        getSalesmanSalesTrend(this.startTime,this.endTime,this.ywyId).then(res => {
           if (res.code === 0){
             console.log(res.data);
             let apiResponse = res.data;
             // 提取日期列表并排序
             let categories = apiResponse.map(item => {
               // 从日期中提取月日，例如 "2025-08-01" -> "08-01" -> "8/1" 或者只显示日 "1"
               return item.date.split("-")[2]; // 这里提取日期中的日部分
             });

             // 排序日期
             categories.sort((a, b) => parseInt(a) - parseInt(b));

             // 按日期排序数据
             let sortedData = apiResponse.sort((a, b) => new Date(a.date) - new Date(b.date));

             // 提取核销数据和上货数据
             let verificationData = sortedData.map(item => item.verificationCount);
             let activateData = sortedData.map(item => item.activateCount);

             // 构造图表需要的格式
             let resTb = {
               categories: categories,
               series: [
                 {
                   name: "核销",
                   data: verificationData
                 },
                 {
                   name: "上货",
                   data: activateData
                 }
               ]
             };

             this.chartData = JSON.parse(JSON.stringify(resTb));
          }
        }).catch(err => {

        });
      getSalesmanVisitTrend(this.startTime,this.endTime,this.ywyId).then(res => {
        if (res.code === 0){
          // 处理巡店趋势数据
          let apiResponse = res.data;

          // 提取日期列表（这里提取日部分）
          let categories = apiResponse.map(item => {
            return item.date.split("-")[2]; // 提取日期中的日部分
          });

          // 按日期排序数据
          let sortedData = apiResponse.sort((a, b) => new Date(a.date) - new Date(b.date));

          // 提取巡店数据
          let visitData = sortedData.map(item => item.visitCount || 0);

          // 构造图表需要的格式（与selectedCode中格式一致）
          let resFormat = {
            categories: categories,
            series: [
              {
                name: "巡店",
                data: visitData
              }
            ]
          };

          this.chartDataXd = JSON.parse(JSON.stringify(resFormat));
        }
      }).catch(err => {
        console.error(err);
      });

    },
    initJXS() {
      this.chartTitle = "核销和下单趋势统计";
      getSalesTotal(this.startTime,this.endTime).then(res => {
            if (res.code === 0){
              this.hexiaoNumber = res.data.orderTotal;
              this.xiaDanNumber = res.data.verificationTotal;
            }
      }).catch(err => {

      });
      getSalesTrend(this.startTime,this.endTime).then(data => {
          if (data.code === 0){
            let apiResponse = data.data;
            // 提取日期列表并排序
            let categories = apiResponse.map(item => {
              // 从日期中提取月日，例如 "2025-08-01" -> "08-01" -> "8/1" 或者只显示日 "1"
              return item.date.split("-")[2];
            })
            categories.sort((a, b) => parseInt(a) - parseInt(b));
            // 按日期排序数据
            let sortedData = apiResponse.sort((a, b) => new Date(a.date) - new Date(b.date));
            let verificationData = sortedData.map(item => item.verificationCount);
            let orderCountData = sortedData.map(item => item.orderCount);
            let res = {
              categories: categories,
              series: [
                {
                  name: "核销",
                  data: verificationData
                },
                {
                  name: "下单",
                  data: orderCountData
                }
              ]
            };
            this.chartData = JSON.parse(JSON.stringify(res));
          }
      })

    },
    confirm(e) {
      this.startTime = e[0];
      this.endTime = e[e.length -1];
      this.startTimeXd = e[0]+' ~ '+e[e.length -1];
      this.timeShow = false;
      if (this.type == 1){
        this.initMenDian();
      }
      if (this.type == 2){
        this.initYWY();
      }
      if (this.type == 3){
        this.initJXS();
      }
    },
  }
};
</script>

<style scoped>
.container {
  background-image: url("https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/cjx/bgi_2.png");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  height: 100vh;
  padding: 0px 10px;
}
.title-text{
  font-weight: bold;
  font-size: 18px;
  color: #102A3C;
  text-align: center;
  height: 12vh;
  line-height: 16vh;
}
  /* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
  .charts-box {
    width: 100%;
    height: 210px;
  }
  .query-btn {
    background-color: #409eff;
    color: #fff;
    padding: 20rpx;
    border-radius: 10rpx;
    height: 34rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .query-btn-icon {
    height: 32rpx;
    width: 32rpx;
    background-image:
        url("https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/cjx/queryIoc.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  .query-btn-text {
    font-weight: 400;
    font-size: 30rpx;
    color: #F5F5F5;
  }
  .filter{
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 160rpx;
    background: #FFFFFF;
    box-shadow: 0rpx 10rpx 20rpx 0rpx rgba(168,168,168,0.22);
    border-radius: 12rpx;
    border: 2px solid #FFFFFF;
  }
  .item-one{
    display: flex;

  }
  .type-icon-hexiao {
    height: 80rpx;
    width: 80rpx;
    background-image:
        url("https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/cjx/hexiaoIoc.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  .type-icon-xundian {
    height: 80rpx;
    width: 80rpx;
    background-image:
        url("https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/cjx/xundianIoc.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  .type-icon-shanghuo {
    height: 80rpx;
    width: 80rpx;
    background-image:
        url("https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/cjx/shanghuoIoc.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  .type-icon-xiadan {
    height: 80rpx;
    width: 80rpx;
    background-image:
        url("https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/cjx/xiadanIoc.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  .number{
    font-weight: bold;
    font-size: 30rpx;
    color: #3B3638;
  }
  .text{
    font-weight: 400;
    font-size: 28rpx;
    color: #84868A;
  }
  .type-data{
    margin-left: 10rpx;
  }
  .t-one{
    margin-top: 10px;
    background-color: #fff;
  }
  .t-text {
    position: relative;
    padding-left: 10px; /* 为竖杠留出空间 */
    font-size: 30rpx; /* 根据需要调整字体大小 */
    color: #3B3638; /* 标题颜色 */
    font-weight: bold;
  }

  .t-text::before {
    content: ''; /* 必须设置 content 属性 */
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%); /* 垂直居中 */
    width: 4px; /* 竖杠宽度 */
    height: 16px; /* 竖杠高度 */
    background-color: #1890FF; /* 蓝色 */
  }
  ::v-deep .u-input{
    background-color: #fff;
  }
  ::v-deep .u-calendar{
	  z-index: 999;
  }
  
  .popup-content{
    height: 45vh;
    padding: 10px;
  }
  .popup-text{
    font-family: PingFang SC;
    font-weight: bold;
    font-size: 36rpx;
    color: #1C1E1D;
    text-align: center;
    margin-bottom: 10px;
  }
  .popup-btn{
    display: flex;
    justify-content: space-around;
  }
  .popup-btn-one{
    width: 275rpx;
    height: 70rpx;
    background: linear-gradient(0deg, #6FA4FE, #488CFF);
    box-shadow: 0rpx 9rpx 16rpx 0rpx rgba(153,153,153,0.35);
    border-radius: 35rpx;
  }
  .explain{
    font-weight: 400;
    font-size: 28rpx;
    color: #3B3638;
  }
</style>