zhangxiaoxu
2026-06-17 9697dfd0004335bab3bf5626425eab3130a55ec6
pages/home/home.vue
@@ -86,12 +86,19 @@
        </view>
      </view>
      <!-- 煤种发运情况 -->
      <view class="shoukuan-group" v-if="coalTongjiTemp && coalTongjiTemp.length > 0">
      <view class="shoukuan-group" v-if="coalLoaded || coalLoading">
        <view class="currentDay-box">
          <combined-title title="煤种发运情况">
          </combined-title>
          <view class="date-pick-box" @click="openCoalCalendar">
            <text class="date-pick-text">{{coalRangeText}}</text>
            <image class="date-pick-icon" src="@/static/home/dateIcon.png"></image>
          </view>
        </view>
        <view class="shoukuan-box">
        <view class="block-loading" v-if="coalLoading">
          <u-loading-icon mode="circle" color="#1987FF" size="40"></u-loading-icon>
        </view>
        <view class="shoukuan-box" v-if="coalLoaded && !coalLoading">
          <view class="coalFayun-total">
            <view class="total-block">
              <view class="num">{{d2Sum || 0}}</view>
@@ -159,13 +166,20 @@
        </view>
      </view>
      <!-- 分客户煤种发运情况 -->
      <view class="shoukuan-group" v-if="kehuTongjiTemp && kehuTongjiTemp.length > 0">
      <view class="shoukuan-group" v-if="kehuLoaded || kehuLoading">
        <view class="currentDay-box">
          <combined-title title="分客户煤种发运情况">
          </combined-title>
          <view class="date-pick-box" @click="openKehuCalendar">
            <text class="date-pick-text">{{kehuRangeText}}</text>
            <image class="date-pick-icon" src="@/static/home/dateIcon.png"></image>
          </view>
        </view>
        <view class="shoukuan-box">
        <view class="block-loading" v-if="kehuLoading">
          <u-loading-icon mode="circle" color="#1987FF" size="40"></u-loading-icon>
        </view>
        <view class="shoukuan-box" v-if="kehuLoaded && !kehuLoading">
          <div class="shoukuan-box-inside">
            <view class="shoukuan-main" v-for="(item,index) in kehuTongji" :key="index">
              <view class="shoukuan-line">
@@ -182,7 +196,7 @@
              </view>
              <view class="shoukuan-line">
                <view class="name">账套:</view>
                <view class="text1">{{item.ledgerName}}</view>
                <view class="text1">{{item.ledgerName || ''}}</view>
              </view>
<!--              <view class="coalTongji-box">
                <view class="shoukuan-line kehu-block">
@@ -551,6 +565,42 @@
      </view>
      <u-gap height="60" bgColor="#eeeeee"></u-gap>
    <!-- 煤种发运情况 时间段选择 -->
    <u-calendar
        :key="'coal-' + coalCalendarKey"
        rowHeight="100"
        :show="coalCalendarShow"
        mode="range"
        :defaultDate="coalDefaultDate"
        :minDate="minDateTimestamp"
        :maxDate="maxDateTimestamp"
        :monthNum="calendarMonthNum"
        allowSameDay
        title="选择时间段"
        startText="开始"
        endText="结束"
        @confirm="coalCalendarConfirm"
        @close="coalCalendarShow = false"
    ></u-calendar>
    <!-- 分客户煤种发运情况 时间段选择 -->
    <u-calendar
        :key="'kehu-' + kehuCalendarKey"
        rowHeight="100"
        :show="kehuCalendarShow"
        mode="range"
        :defaultDate="kehuDefaultDate"
        :minDate="minDateTimestamp"
        :maxDate="maxDateTimestamp"
        :monthNum="calendarMonthNum"
        allowSameDay
        title="选择时间段"
        startText="开始"
        endText="结束"
        @confirm="kehuCalendarConfirm"
        @close="kehuCalendarShow = false"
    ></u-calendar>
    <view class="passWord-main-box">
      <u-popup :show="passShow"
               :closeable="true"
@@ -641,7 +691,77 @@
      },
      shenqingMenu() {
         return this.$store.state.shenqingMenu;
      }
      },
    // 当天日期(YYYY-MM-DD)
    todayStr() {
      return this.todayDate();
    },
    // 默认时间使用用一天的日期(YYYY-MM-DD 23:59:59)
    endTodaydayStr() {  //默认时间使用用一天的日期
      // const date = new Date(new Date().getTime() - 24 * 60 * 60 * 1000);
      const date = new Date(new Date().getTime());
      const y = date.getFullYear();
      let m = date.getMonth() + 1;
      m = m < 10 ? '0' + m : m;
      let d = date.getDate();
      d = d < 10 ? '0' + d : d;
      let time = `${y}-${m}-${d} 23:59:59`
      return time;
    },
    // 默认起始时间(当天 00:00:00)。注意 todayStr 是 computed(取值用 this.todayStr,不能加括号当函数调)
    startTodayStr() {
      return `${this.todayStr}`;
    },
    // 可选最早日期:当前日期往前推 1 年(去年同月),允许翻到上一年的历史月份
    minDateTimestamp() {
      const d = new Date();
      d.setFullYear(d.getFullYear() - 1);
      return d.getTime();
    },
    // 可选最晚日期:当前日期往后推 1 年(明年同月)(u-calendar 要求 maxDate 必须大于当前时间)
    maxDateTimestamp() {
      const d = new Date();
      d.setFullYear(d.getFullYear() + 1);
      return d.getTime();
    },
    // u-calendar 月份滑动列表最多展示的月数。渲染量与可翻范围正相关(月数×约42格):
    // 设 60 时点击/关闭的 setData 会卡(约 2500 格),故缩到 25(约 1000 格),今天大致居中。
    // 需与 minDate~maxDate 跨度一致(前后各 1 年 + 当月 = 25),否则部分月份翻不到
    calendarMonthNum() {
      // 前后各 1 年,含当月共 25 个月;调整范围时同步改上面 minDate/maxDate 的年数
      return 25;
    },
    // 煤种发运情况:日期(YYYY-MM-DD)区间。日历按天比较/高亮、文本回显都用纯日期,
    // 故从带时分秒的存储值里截取前 10 位(YYYY-MM-DD);为空时默认今天
    coalDateRange() {
      const start = (this.coalStartTime || this.todayStr).slice(0, 10);
      const end = (this.coalEndTime || this.todayStr).slice(0, 10);
      return [start, end];
    },
    // 煤种发运情况:回显时间段文本(仅日期)
    coalRangeText() {
      const [start, end] = this.coalDateRange;
      return start === end ? start : `${start} ~ ${end}`;
    },
    // 煤种发运情况:日历默认选中日期(range 模式返回数组,仅日期)
    coalDefaultDate() {
      return this.coalDateRange;
    },
    // 分客户煤种发运情况:日期(YYYY-MM-DD)区间(同 coalDateRange,去掉时分秒)
    kehuDateRange() {
      const start = (this.kehuStartTime || this.todayStr).slice(0, 10);
      const end = (this.kehuEndTime || this.todayStr).slice(0, 10);
      return [start, end];
    },
    // 分客户煤种发运情况:回显时间段文本(仅日期)
    kehuRangeText() {
      const [start, end] = this.kehuDateRange;
      return start === end ? start : `${start} ~ ${end}`;
    },
    // 分客户煤种发运情况:日历默认选中日期(range 模式返回数组,仅日期)
    kehuDefaultDate() {
      return this.kehuDateRange;
    }
   },
   data() {
    const validatePass = (rule, value, callback) => {
@@ -832,6 +952,20 @@
      kehuTongji:[], //煤种统计
      kehuTongjiTemp:[], //煤种统计
      kehuTongjiShowIsMore: false,
      // 煤种发运情况 时间段选择
      coalLoaded: false,    //是否已查询过(控制区块显隐)
      coalLoading: false,   //区块内转圈(加载中)
      coalCalendarShow: false,
      coalCalendarKey: 0,   //每次打开自增,强制 u-calendar 重新挂载,规避微信 scroll-view 重复打开不重滚、默认停在 minDate 月的 bug
      coalStartTime: '',    //开始日期(YYYY-MM-DD 00:00:00),默认当天
      coalEndTime: '',      //结束日期(YYYY-MM-DD 23:59:59),默认当天
      // 分客户煤种发运情况 时间段选择
      kehuLoaded: false,    //是否已查询过(控制区块显隐)
      kehuLoading: false,   //区块内转圈(加载中)
      kehuCalendarShow: false,
      kehuCalendarKey: 0,   //每次打开自增,强制 u-calendar 重新挂载(同 coalCalendarKey)
      kehuStartTime: '',    //开始日期(YYYY-MM-DD 00:00:00),默认当天
      kehuEndTime: '',      //结束日期(YYYY-MM-DD 23:59:59),默认当天
      roles:[],
      d2Sum:0,  //总计金额
      d1Sum:0,  //总计
@@ -979,6 +1113,17 @@
    handlePwd() {
      this.passShow = true
    },
    // 打开煤种发运情况 时间段日历:自增 key 强制 u-calendar 重新挂载,
    // 规避微信端重复打开时 scroll-view 因 scroll-top 未变而不重滚、默认停在 minDate 月的 bug
    openCoalCalendar() {
      this.coalCalendarKey++
      this.coalCalendarShow = true
    },
    // 打开分客户煤种发运情况 时间段日历(原理同 openCoalCalendar)
    openKehuCalendar() {
      this.kehuCalendarKey++
      this.kehuCalendarShow = true
    },
    handleShouKuanIsMore() {  //当日收款情况
      this.shoukuanIsMore = !this.shoukuanIsMore
    },
@@ -1026,8 +1171,15 @@
      })
    },
    getStatistics1() {  //按煤种统计
      this.$reqGet('getStatistics1').then(res => {
      console.log('按煤种统计------开始时间',this.coalStartTime,this.startTodayStr)
      console.log('按煤种统计------开始时间',this.coalEndTime,this.endTodaydayStr)
      this.coalLoading = true
      this.$reqGet('getStatistics1', {
        startTime: this.coalStartTime || this.startTodayStr,
        endTime: this.coalEndTime || this.endTodaydayStr
      }).then(res => {
        if (res.code == 0) {
          this.coalLoaded = true
          this.coalTongjiTemp = res.data || []
          if(this.coalTongjiTemp && this.coalTongjiTemp.length > 0){
            this.d2Sum = this.coalTongjiTemp[0]?.d2Sum || 0
@@ -1038,22 +1190,63 @@
              this.coalTongji = this.coalTongjiTemp.slice(0,2)
              this.coalShowIsMore = false
            }
          } else {
            this.resetCoalStat()
          }
        }
      }).finally(() => {
        this.coalLoading = false
      })
    },
    resetCoalStat() {  //清空煤种发运情况统计
      this.coalTongji = []
      this.coalTongjiTemp = []
      this.d2Sum = 0
      this.d1Sum = 0
      this.lyDSumSum = 0
      this.dsumSum = 0
    },
    // 煤种发运情况 时间段确认(开始补 00:00:00、结束补 23:59:59)
    coalCalendarConfirm(e) {
      this.coalCalendarShow = false
      const arr = Array.isArray(e) ? e : (e && e.result) || []
      if (arr.length < 2) return
      this.coalStartTime = `${arr[0]} 00:00:00`
      this.coalEndTime = `${arr[arr.length - 1]} 23:59:59`
      this.getStatistics1()
    },
    getStatistics2() {  //按客户发运统计
      this.$reqGet('getStatistics2').then(res => {
      console.log('发运统计------开始时间',this.kehuStartTime,this.startTodayStr)
      console.log('发运统计------开始时间',this.kehuEndTime,this.endTodaydayStr)
      this.kehuLoading = true
      this.$reqGet('getStatistics2', {
        startTime: this.kehuStartTime || this.startTodayStr,
        endTime: this.kehuEndTime || this.endTodaydayStr
      }).then(res => {
        if (res.code == 0) {
          this.kehuLoaded = true
          this.kehuTongjiTemp = res.data || []
          if(this.kehuTongjiTemp && this.kehuTongjiTemp.length > 0){
            if(this.kehuTongjiTemp.length > 0) {
              this.kehuTongji = this.kehuTongjiTemp.slice(0,2)
              this.kehuTongjiShowIsMore = false
            }
          } else {
            this.kehuTongji = []
          }
        }
      }).finally(() => {
        this.kehuLoading = false
      })
    },
    // 分客户煤种发运情况 时间段确认(开始补 00:00:00、结束补 23:59:59)
    kehuCalendarConfirm(e) {
      this.kehuCalendarShow = false
      const arr = Array.isArray(e) ? e : (e && e.result) || []
      if (arr.length < 2) return
      this.kehuStartTime = `${arr[0]} 00:00:00`
      this.kehuEndTime = `${arr[arr.length - 1]} 23:59:59`
      this.getStatistics2()
    },
    //代办详情
    daibanDetail(item) {
@@ -1158,7 +1351,8 @@
         m = m < 10 ? '0' + m : m;
         let d = date.getDate();
         d = d < 10 ? '0' + d : d;
         const time = y + '-' + m + '-' + d;
         // const time = y + '-' + m + '-' + d;
         const time = `${y}-${m}-${d} 00:00:00`;
         console.log('todayDate---------', time);
         return time;
      },
@@ -1423,19 +1617,18 @@
};
</script>
<style lang="scss" scoped>
::v-deep{
  .uni-table-td,.uni-table-th{
    color: #000;
  }
  .u-popup__content{
    width: 85%;
    padding: 40rpx;
    box-sizing: border-box;
    border-radius: 10rpx;
  }
  .passWord-main-box{
    .u-popup__content{
      width: 85%;
      padding: 40rpx;
      box-sizing: border-box;
      border-radius: 10rpx;
    }
    .u-icon__icon{
      font-size: 28rpx!important;
    }
@@ -1815,6 +2008,34 @@
          align-items: baseline;
        }
      }
      .date-pick-box{
        position: absolute;
        right: 20rpx;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        align-items: center;
        max-width: 55%;
        .date-pick-text{
          font-size: 26rpx;
          color: #4b6cfa;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .date-pick-icon{
          width: 32rpx;
          height: 32rpx;
          margin-left: 8rpx;
        }
      }
    }
    .block-loading{
      width: 100%;
      padding: 60rpx 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .shoukuan-box{
      width: 100%;