scancode-miro/pages/cjx/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="show = 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="show = !show">
              <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">0</view>
            <view class="text">核销</view>
          </view>
        </view>
        <view class="item-one"  v-show="type == 2">
          <view class="type-icon-xundian"></view>
          <view class="type-data">
            <view class="number">0</view>
            <view class="text">巡店</view>
          </view>
        </view>
        <view class="item-one">
          <view class="type-icon-shanghuo"></view>
          <view class="type-data">
            <view class="number">0</view>
            <view class="text">上货</view>
          </view>
        </view>
        <view class="item-one" v-show="type == 3">
          <view class="type-icon-xiadan"></view>
          <view class="type-data">
            <view class="number">0</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">
          <qiun-data-charts
              type="line"
              :opts="opts"
              :chartData="chartData"
          />
        </view>
      </view>
      <view class="t-one" v-show=" type == 2">
        <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 :show="timeShow" :mode="mode" @confirm="confirm"></u-calendar>

  </view>

</template>

<script>
import {getSalesTotal,getSalesTrend,getSalesmanSalesTotal,getSalesmanSalesTrend,getSalesmanVisitTrend} from "../../../api/hexiao";
export default {
  data() {
    return {
      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) {
	  options.id = 2;
    //门店
    if (options.id == 1){
      this.title = '门店销售数据';
      this.type = 1;
      this.initMenDian();
    }
    //业务员
    if (options.id == 2){
      this.title = '业务员销售数据';
      this.type = 2;
      this.initYWY(options.ywyId);
    }
    //经销商
    if (options.id == 3){
      this.title = '经销商销售数据';
      this.type = 3;
      this.initJXS();
    }
  },
  onReady() {
    this.getXdData();
  },
  methods: {
    initMenDian() {

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

        });
        getSalesmanSalesTrend(this.startTime,this.endTime,ywyId).then(res => {
           if (res.code === 0){
             let apiResponse = res.data;
             // 提取日期列表并排序
             let categories = apiResponse.data.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.data.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 res = {
               categories: categories,
               series: [
                 {
                   name: "核销",
                   data: verificationData
                 },
                 {
                   name: "上货",
                   data: activateData
                 }
               ]
             };

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

        });
      getSalesmanVisitTrend(this.startTime,this.endTime,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() {
      getSalesTotal(this.startTime,this.endTime).then(res => {
            if (res.code === 0){
              this.hexiaoNumber = res.data.verificationTotal;
              this.xundianNumber = res.data.visitTotal;
            }
      }).catch(err => {

      });
      getSalesTrend(this.startTime,this.endTime).then(res => {
          if (res.code === 0){
            let apiResponse = res.data;
            // 提取日期列表并排序
            let categories = apiResponse.data.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.data.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[1];
      this.startTimeXd = e[0]+' ~ '+e[1];
      this.timeShow = false;

    },
    getXdData() {
      //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
      let res = {
        categories: ["7","8","9","10","11","12"],
        series: [
          {
            name: "巡店",
            data: [35,8,25,37,4,20]
          },
        ]
      };
      this.chartDataXd = JSON.parse(JSON.stringify(res));
    }
  }
};
</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: 10vh;
  line-height: 10vh;
}
  /* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
  .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;
  }
  .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>