From 07b5185641c9c6f34389c84593a2b843a2c4ef75 Mon Sep 17 00:00:00 2001
From: linfso <linfso@sina.com>
Date: Thu, 15 May 2025 04:23:13 +0800
Subject: [PATCH] md

---
 .../PayBackStat/PayDay copy.vue               | 209 ++++++++++++++
 .../emisSettleBill/PayBackStat/PayDay.vue     | 267 ++++++++++++++++++
 2 files changed, 476 insertions(+)
 create mode 100644 src/views/emis/emisSettleBill/PayBackStat/PayDay copy.vue
 create mode 100644 src/views/emis/emisSettleBill/PayBackStat/PayDay.vue

diff --git a/src/views/emis/emisSettleBill/PayBackStat/PayDay copy.vue b/src/views/emis/emisSettleBill/PayBackStat/PayDay copy.vue
new file mode 100644
index 00000000..dc41fbba
--- /dev/null
+++ b/src/views/emis/emisSettleBill/PayBackStat/PayDay copy.vue	
@@ -0,0 +1,209 @@
+<template>
+  <div class="app-container">
+    <!-- <el-alert
+      :title="goodsData.info.name"
+      type="success"
+      :closable="false"
+      center
+      effect="dark">
+    </el-alert> -->
+    <!-- <el-form v-if="goodsData && goodsData.priceExts && goodsData.priceExts.length > 0" style="margin-top:10px;" label-width="140px">
+      <el-form-item label="请选择规格尺寸">
+        <el-select style="width:95%" v-model="priceId" placeholder="请选择" @change="priceIdChange">
+          <el-option v-for="item in goodsData.priceExts" :key="item.id" :label="item.propertyChildNames" :value="item.id" />
+        </el-select>
+      </el-form-item>
+    </el-form> -->
+    <el-divider>每日收款日历</el-divider>
+    <el-calendar v-model="selectDay">
+      <template slot="dateCell" slot-scope="{date, data}">
+        <!-- { type, isSelected, day} type 表示该日期的所属月份，可选值有 prev-month，current-month，next-month；isSelected 标明该日期是否被选中；day 是格式化的日期，格式为 yyyy-MM-dd -->
+        <div style="text-align:center;margin-top:15px;" @click="openSetting(data)">
+          <div>{{ data.day.split('-').slice(1).join('月') }}日</div>
+
+          <!-- <div v-if="getPriceData(data.day)" style="display:flex;justify-content:center;margin-top:15px;font-size:12px;">
+            <div style="color:red">￥ {{ getPriceData(data.day).price }}</div>
+            <div style="margin-left:10px;color:green;">剩 {{ getPriceData(data.day).stores }}</div>
+          </div>
+          <div v-else style="color:gray;margin-top:15px;font-size:12px;">未设置</div> -->
+        </div>
+      </template>
+    </el-calendar>
+    <div style="text-align:center;">
+      <el-button type="primary" @click="goback" size="medium">返回</el-button>
+    </div>
+
+
+
+    <!-- <el-dialog title="设置价格" :visible.sync="dialogFormVisible" :close-on-click-modal="false" :close-on-press-escape="false">
+      <el-form :rules="rules" ref="addEditPopForm" :model="pushData" label-position="left" label-width="180px">
+        <el-form-item label="当日价格" prop="price">
+          <el-input v-model="pushData.price" clearable @keyup.enter.native="handleCreateSave" style="width: 30%;"></el-input>
+        </el-form-item>
+        <el-form-item label="当日库存数" prop="stores">
+          <el-input v-model="pushData.stores" clearable @keyup.enter.native="handleCreateSave" style="width: 30%;"></el-input>
+        </el-form-item>
+        <el-form-item label="">
+          <el-checkbox v-model="pushData.batchSetCurMonth">批量设置当月</el-checkbox>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogFormVisible = false" size="small">取消</el-button>
+        <el-button type="primary" @click="handleCreateSave" size="small">确定</el-button>
+      </div>
+    </el-dialog> -->
+
+  </div>
+</template>
+
+<script>
+import { calculateRecedMoney } from "@/api/emis/emisSettleBill";
+
+export default {
+  data() {
+    return {
+
+      rules: {
+        price: [
+          { required: true, message: '不能为空'}
+        ],
+        stores: [
+          { required: true, message: '不能为空'}
+        ],
+      },
+
+      goodsId: undefined, // 商品ID
+      goodsData: undefined,  // 接口读取的商品详情数据
+      priceId: undefined, // 选择的规格尺寸的记录ID
+      selectDay: new Date(), // 日历上选择的日期
+      dayPrices: undefined, // 读取的按天价格设置记录
+      selectDayStr: undefined, // 点击日历时候赋值
+
+      pushData: {
+        price:undefined,
+        stores: undefined,
+        batchSetCurMonth: false
+      },
+
+      dialogTitle : undefined,
+      dialogFormVisible:false,
+
+    }
+  },
+  mounted() {
+    this.initRecdStatData();
+    // if (this.$route.query.id) {
+    //   this.goodsId = this.$route.query.id
+    //   info(this.$route.query.id).then(res => {
+    //     if (res.code == 0) {
+    //       this.goodsData = res.data
+    //       if (res.data.priceExts && res.data.priceExts.length > 0) {
+    //         this.priceId = res.data.priceExts[0].id
+    //       }
+    //       this.getdayPrices()
+    //     }
+    //   })
+    // }
+  },
+  methods: {
+     initRecdStatData(){
+        // 查询统计
+        const end = new Date()
+        const start = new Date()
+        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+        start.setHours(0,0,0,0)
+        end.setHours(23,59,59,0)
+        this.dateRange=[timeFormat(start), timeFormat(end)]
+
+        let extQParam={
+            beginTime:this.dateRange[0],
+            endTime:this.dateRange[1],
+        }
+
+        calculateRecedMoney(extQParam).then(response => {
+          // console.log("====>calculateRecedMoney===>",response);
+          // let xData=[];
+          // let yData=[];
+          // // 做数据转换
+          // response.data.forEach(item => {
+          //     xData.push(item.tradeDay);
+          //     yData.push(item.payMoney);
+          // });
+
+          // this.recdStateData.xAxisData=[...xData];
+          // this.recdStateData.orderStateData=[...yData];
+          // console.log("====>this.recdStateData===>",this.recdStateData);
+
+        });
+
+     },
+    // priceIdChange(priceId){
+    //   this.priceId = priceId
+    //   this.getdayPrices()
+    // },
+    // getdayPrices(){
+    //   getdayPrices(this.goodsId, this.priceId).then(res => {
+    //     if (res.code == 0) {
+    //       this.dayPrices = res.data
+    //       this.dayPrices.forEach(ele => {
+    //         ele.day = ele.day.split(" ")[0]
+    //       })
+    //     } else {
+    //       this.dayPrices = undefined
+    //     }
+    //   })
+    // },
+    // getPriceData(day){
+    //   if (!this.dayPrices) {
+    //     return null
+    //   }
+    //   return this.dayPrices.find(ele => {
+    //     return ele.day == day
+    //   })
+    // },
+    // openSetting(data){
+    //   this.selectDayStr = data.day
+    //   const o = this.getPriceData(data.day)
+    //   this.pushData.batchSetCurMonth = false
+    //   if (o) {
+    //     this.pushData.price = o.price
+    //     this.pushData.stores = o.stores
+    //   }
+    //   this.dialogFormVisible = true
+    //   this.$nextTick(() => {
+    //     this.$refs['addEditPopForm'].clearValidate()
+    //   })
+    // },
+    // handleCreateSave(){
+    //   this.$refs['addEditPopForm'].validate((valid) => {
+    //     if (valid) {
+    //       modifyDayPrice({
+    //         goodsId: this.goodsId,
+    //         priceId: this.priceId,
+    //         day: this.selectDayStr,
+    //         price: this.pushData.price,
+    //         stores: this.pushData.stores,
+    //         batchSetCurMonth: this.pushData.batchSetCurMonth
+    //       }).then((res) => {
+    //         if (res.code == 0) {
+    //           this.$message({
+    //             message: '操作成功',
+    //             type: 'success'
+    //           });
+    //           this.dialogFormVisible = false
+    //           this.getdayPrices()
+    //         } else {
+    //           this.$message.error(res.msg);
+    //         }
+    //       }).catch(e=>{
+    //         console.error(e);
+    //       })
+    //     }
+    //   })
+    // },
+    goback() {
+      this.$router.back();
+    }
+  }
+}
+</script>
diff --git a/src/views/emis/emisSettleBill/PayBackStat/PayDay.vue b/src/views/emis/emisSettleBill/PayBackStat/PayDay.vue
new file mode 100644
index 00000000..225e0da1
--- /dev/null
+++ b/src/views/emis/emisSettleBill/PayBackStat/PayDay.vue
@@ -0,0 +1,267 @@
+<template>
+  <div class="app-container">
+    <div  style="margin-bottom: 100px;">
+      <!-- <div class="batch-add-Work-class"> -->
+        <!-- <el-date-picker  size="mini" style="width:100%" v-model="currentMonth" type="months" placeholder="选择月份" value-format="yyyy-MM"></el-date-picker> -->
+      <!-- </div> -->
+       <CardWithHeader header="收款日历"  height="700px">
+            <template v-slot:body>
+              <div>
+                <div style="width:100%;height: 500px;">
+                    <el-calendar v-model="calendarDate" :first-day-of-week="7" :key="resetRefreshId+'1'">
+                      <template slot="dateCell" slot-scope="{ date, data }">
+                        <div class="day-content-class"  @click="handleView(data.day)">
+                          <template>
+                            <div class="header-class">
+                              <div class="day-class">
+                                {{
+                                  data.day
+                                    .split("-")
+                                    .slice(1)
+                                    .join("-")
+                                }}
+                              </div>
+                              <div class="handle-class">
+                              </div>
+                            </div>
+                            <div class="info-class">
+                              <div >
+                                <div v-if="payData[data.day]"  >
+                                  <span v-if="payData[data.day]>500000" style="color:red;font-weight: bold;text-align: center;font-size: 12px;">
+                                  ￥{{ payData[data.day] }}
+                                  </span>
+                                  <span v-else-if="payData[data.day]>=100000 && payData[data.day]<500000" style="color:red;font-weight: bold;text-align: center;font-size: 12px;">
+                                    ￥{{ payData[data.day] }}
+                                  </span>
+
+                                  <span v-else style="color:black;font-weight: bold;text-align: center;font-size: 12px;">
+                                    ￥{{ payData[data.day] }}
+                                  </span>
+                                </div>
+                              </div>
+                            </div>
+                          </template>
+                        </div>
+                      </template>
+                    </el-calendar>
+                </div>
+              </div>
+            </template>
+        </CardWithHeader>
+
+        <CardWithHeader header="收款趋势"  height="400px" >
+          <template v-slot:body>
+            <LineOrderChart :chart-data="recdStateData" :key="resetRefreshId+'2'" />
+          </template>
+        </CardWithHeader>
+
+        <!--
+         <CardWithHeader header="未回款统计"  height="400px">
+          <template v-slot:body>
+            <LineOrderChart :chart-data="recdStateData" />
+          </template>
+        </CardWithHeader> -->
+    </div>
+
+  </div>
+</template>
+
+<script>
+  import { calculateRecedMoney } from "@/api/emis/emisSettleBill";
+  import dayjs from 'dayjs'
+  import CardWithHeader from '@/components/CardWithHeader/index.vue';
+  import LineOrderChart from '@/views/emis/common/LineOrderChart.vue';
+
+  import {timeFormat} from '@/utils/dateUtils'
+  import moment from "moment";
+  export default {
+    components: {
+      CardWithHeader,LineOrderChart
+    },
+    data() {
+      return {
+        resetRefreshId:null,
+        calendarDate: new Date(),
+        payData:new Map(),
+        recdStateData:{
+          xAxisData:[],
+          orderStateData:[]
+        },
+
+        currentMonth:null,
+        thisDay: null,
+        thisDayWork: null,
+        ending: null,
+        dragging: null,
+
+        batchAddDrawer: false,
+        drawer: false,
+        innerDrawer: false,
+        hanleDay: "",
+        workInfoList: [],
+        // 时间范围
+        dateRange: ['2023-10-1', '2023-10-20'],
+        changeDateDrawer: false,
+        // 点击月中已选中的日期
+        currentDate: [],
+      };
+    },
+    watch: {
+        calendarDate(newVal, oldVal) {
+
+          console.log("==月份==>",moment(newVal).format("YYYY-MM"))
+          let start = moment(newVal).startOf("month");
+          let end = moment(newVal).endOf("month");
+          this.dateRange=[timeFormat(start), timeFormat(end)]
+          this.initRecdStatData();
+
+          // if (
+          //   val &&
+          //   moment(val).format("YYYY-MM-DD") == moment().format("YYYY-MM-DD")
+          // ) {
+          //   console.log("点击了‘今天’按钮");
+          // } else if (
+          //   val &&
+          //   moment(val).toDate() < moment(oldVal).startOf("month").toDate()
+          // ) {
+          //   console.log("点击了‘上个月’按钮");
+          // } else if (
+          //   val &&
+          //   moment(val).toDate() > moment(oldVal).endOf("month").toDate()
+          // ) {
+          //   console.log("点击了‘下个月’按钮");
+          // } else {
+          //   console.log("点击了" + moment(val).format("YYYY-MM") + "的按钮");
+          // }
+        },
+    },
+    computed: {},
+    created() {
+      // 查询统计
+      const end = new Date()
+      // const start = new Date()
+      // start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+      // start.setHours(0,0,0,0)
+      const start=moment().startOf('month');
+      console.log("====>=111==>",start);
+      end.setHours(23,59,59,0)
+      this.dateRange=[timeFormat(start), timeFormat(end)]
+
+      this.initRecdStatData();
+    },
+    mounted() {
+      // this.initRecdStatData();
+    },
+    methods: {
+       initRecdStatData(){
+        let extQParam={
+            beginTime:this.dateRange[0],
+            endTime:this.dateRange[1],
+        }
+        calculateRecedMoney(extQParam).then(response => {
+          this.resetRefreshId="payday-"+Math.random().toString(36).substring(3,10);
+          console.log("====>calculateRecedMoney===>",response);
+          let xData=[];
+          let yData=[];
+          this.payData=new Map();
+
+          response.data.forEach(item => {
+              this.payData[item.tradeDay]=item.payMoney;
+              xData.push(item.tradeDay);
+              yData.push(item.payMoney);
+          });
+
+          this.recdStateData.xAxisData=[...xData];
+          this.recdStateData.orderStateData=[...yData];
+          console.log("====>this.recdStateData===>",this.recdStateData);
+        });
+
+      },
+       handleView(day){
+          this.$router.push(
+            {
+              path: '/ruyERj/EmisSettlePayRecord',
+              query: {
+                action: "queryPayData",
+                tradeDay:day,
+                '_t':(new Date()).getTime()
+              }
+            }
+          );
+      },
+
+    },
+  };
+</script>
+
+<style>
+
+  	.el-calendar-table:not(.is-range) td.prev,
+    .el-calendar-table:not(.is-range) td.next{
+        pointer-events: none;
+    }
+    .prev>.el-calendar-day>p{
+        display: none;
+    }
+    .next>.el-calendar-day>p{
+        display: none;
+    }
+
+
+  .el-table__fixed-right {
+    height: 100% !important;
+  }
+
+  .calender-class {
+    width: 100%;
+    height: 80%;
+  }
+
+  .is-selected {
+    color: #1989fa;
+  }
+
+  .el-calendar__body {
+    height: 80vh;
+  }
+
+  .el-calendar-table {
+    height: 100%;
+  }
+
+  .el-calendar-day {
+    height: 100% !important;
+  }
+
+  .day-content-class {
+    height: 60px;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .header-class {
+    flex: 1;
+    display: flex;
+    height: 28px;
+    flex-direction: row;
+    justify-content: space-between;
+  }
+
+  .day-class {
+    width: 100%;text-align: center;
+    font-size: 13px;
+  }
+
+  .handle-class {
+    flex: 1;
+  }
+
+  .info-class {
+    flex: 2;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+  }
+
+</style>