用户列表新增总收益，优化日期检索

src/api/userModule.js

@@ -52,4 +52,13 @@ export function appUserEcpm(params) {
         method: 'get',
         params
     })
+}
+
+// 根据时间获取收益
+export function getRevenueByTime(data) {
+    return request({
+        url: '/agent-service/appUser/getRevenueByTime',
+        method: 'post',
+        data
+    })
 }

src/components/charts/index.vue

@@ -26,17 +26,18 @@ onMounted(() => {
     // 自动监听加自动销毁
     useEventListener('resize', () => myChart.resize())
     watch(() => props.option, (newVal) => {
-      myChart.setOption(newVal)
-    },{ deep: true })
+      // 内容有变化时，强制刷新
+      myChart.setOption(newVal, true)
+    }, { deep: true })
   }
 })
 </script>
 
 <style lang="scss" scoped>
-  .chart {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: center;
-  }
+.chart {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+}
 </style>

src/components/from/index.vue

@@ -26,7 +26,7 @@
           </el-select>
           <div v-else-if="item.type === 'date'">
             <el-date-picker v-model="form[item.prop]" :type="item.dateType" :placeholder="item.placeholder"
-              :clearable="true" class="fixed-width-picker" style="width: 230px;"></el-date-picker>
+              :clearable="true" class="fixed-width-picker" style="width: 250px;"></el-date-picker>
           </div>
           <div v-else-if="item.type === 'daterange'">
             <el-date-picker v-model="form[item.prop]" type="daterange" range-separator="至" start-placeholder="开始日期"
@@ -85,7 +85,7 @@ export default {
     
     function initFormDefaults() {
       props.formItems.forEach(item => {
-        console.log('item', item)
+        // console.log('item', item)
         if (item.defaultVal) {
           Object.assign(form, {
             [item.prop]: item.defaultVal
@@ -145,7 +145,7 @@ export default {
 .fixed-width-select,
 .fixed-width-picker {
   min-width: 250px;
-  max-width: 250px;
+  max-width: 250px;     
 }
 
 :deep() {

src/components/table/index.vue

@@ -10,119 +10,138 @@
       </el-table-column>
       <slot></slot>
     </el-table>
-    <el-pagination v-if="showPage" v-model:current-page="page.pageNum" class="system-page" background :layout="pageLayout"
-      :total="page.total" :page-size="page.pageSize" :page-sizes="pageSizes" @current-change="handleCurrentChange"
-      @size-change="handleSizeChange">
-    </el-pagination>
+    <div class="system-bottom">
+      <el-pagination v-if="showPage" v-model:current-page="page.pageNum" class="system-page" background
+        :layout="pageLayout" :total="page.total" :page-size="page.pageSize" :page-sizes="pageSizes"
+        @current-change="handleCurrentChange" @size-change="handleSizeChange">
+      </el-pagination>
+      <div v-if="revenue" class="revenue">总收益：<span class="revenue-number">￥{{ revenue }}元</span></div>
+    </div>
   </div>
 </template>
 
 <script lang="js">
-  import { defineComponent, ref, onActivated } from 'vue'
-  export default defineComponent({
-    props: {
-      data: { type: Array, default: () => [] }, // 数据源
-      select: { type: Array, default: () => [] }, // 已选择的数据，与selection结合使用
-      showIndex: { type: Boolean, default: false }, // 是否展示index选择，默认否
-      showSelection: { type: Boolean, default: false }, // 是否展示选择框，默认否
-      showPage: { type: Boolean, default: true }, // 是否展示页级组件，默认是
-      page: { // 分页参数
-        type: Object,
-        default: () => {
-          return { pageNum: 1, pageSize: 20, total: 0 }
-        }
-      },
-      pageLayout: { type: String, default: "total, sizes, prev, pager, next, jumper" }, // 分页需要显示的东西，默认全部
-      pageSizes: { type: Array, default: [10, 20, 50, 100] },
-      id: { type: String, default: '' }, // 行数据的 Key，用来优化 Table 的渲染；
-      height: { type: String, default: '100%' },
-    },
-    setup(props, context) {
-      const table = ref(null)
-      let timer = null
-      // 分页相关：监听页码切换事件
-      const handleCurrentChange = (val) => {
-        if (timer) {
-          props.page.pageNum = 1
-        } else {
-          props.page.pageNum = val
-          context.emit("getTableData")
-        }
-      }
-      // 分页相关：监听单页显示数量切换事件
-      const handleSizeChange = (val) => {
-        timer = 'work'
-        setTimeout(() => {
-          timer = null
-        }, 100)
-        props.page.pageSize = val
-        context.emit("getTableData", true)
-      }
-      // 选择监听器
-      const handleSelectionChange = (val) => {
-        context.emit("selection-change", val)
+import { defineComponent, ref, onActivated } from 'vue'
+export default defineComponent({
+  props: {
+    data: { type: Array, default: () => [] }, // 数据源
+    select: { type: Array, default: () => [] }, // 已选择的数据，与selection结合使用
+    showIndex: { type: Boolean, default: false }, // 是否展示index选择，默认否
+    showSelection: { type: Boolean, default: false }, // 是否展示选择框，默认否
+    showPage: { type: Boolean, default: true }, // 是否展示页级组件，默认是
+    page: { // 分页参数
+      type: Object,
+      default: () => {
+        return { pageNum: 1, pageSize: 20, total: 0 }
       }
-      // 解决BUG：keep-alive组件使用时，表格浮层高度不对的问题
-      onActivated(() => {
-        table.value.doLayout()
-      })
-      return {
-        table,
-        handleCurrentChange,
-        handleSizeChange,
-        handleSelectionChange
+    },
+    pageLayout: { type: String, default: "total, sizes, prev, pager, next, jumper" }, // 分页需要显示的东西，默认全部
+    pageSizes: { type: Array, default: [10, 20, 50, 100] },
+    id: { type: String, default: '' }, // 行数据的 Key，用来优化 Table 的渲染；
+    height: { type: String, default: '100%' },
+    revenue: { type: Number, default: 0 }, //总收益
+  },
+  setup(props, context) {
+    const table = ref(null)
+    let timer = null
+    // 分页相关：监听页码切换事件
+    const handleCurrentChange = (val) => {
+      if (timer) {
+        props.page.pageNum = 1
+      } else {
+        props.page.pageNum = val
+        context.emit("getTableData")
       }
     }
-  })
+    // 分页相关：监听单页显示数量切换事件
+    const handleSizeChange = (val) => {
+      timer = 'work'
+      setTimeout(() => {
+        timer = null
+      }, 100)
+      props.page.pageSize = val
+      context.emit("getTableData", true)
+    }
+    // 选择监听器
+    const handleSelectionChange = (val) => {
+      context.emit("selection-change", val)
+    }
+    // 解决BUG：keep-alive组件使用时，表格浮层高度不对的问题
+    onActivated(() => {
+      table.value.doLayout()
+    })
+    return {
+      table,
+      handleCurrentChange,
+      handleSizeChange,
+      handleSelectionChange
+    }
+  }
+})
 </script>
 
 <style lang="scss" scoped>
-  .system-table-box {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: flex-start;
-    height: 100%;
+.system-table-box {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  height: 100%;
 
-    .system-table {
-      flex: 1;
-      height: 100%;
-    }
+  .system-table {
+    flex: 1;
+    height: 100%;
+  }
 
-    .system-page {
-      margin-top: 20px;
+  .system-bottom {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: 20px;
 
-      &::before {
-        content: '';
+    .revenue {
+      .revenue-number {
+        font-size: 18px;
+        font-weight: 600;
       }
     }
   }
 
-  :deep() {
-    .el-table {
-      color: var(--system-page-color);
-      --el-table-tr-bg-color: var(--system-page-background);
-      --el-table-bg-color: var(--system-page-background);
-      --el-table-header-bg-color: var(--system-page-background);
-      --el-table-border-color: var(--system-page-border-color);
-      --el-table-row-hover-bg-color: var(--system-container-background);
-      --el-bg-color: var(--system-page-background) !important; //左边固定栏背景色
-     
-    }
-   
-    // 分页器
-    .el-input__wrapper,
-    .btn-prev,
-    .btn-next,
-    .number {
-      background-color: var(--system-page-background) !important;
-      color: var(--system-page-color);
-      border-color: var(--system-page-border-color);
-    }
+  .system-page {
+    // margin-top: 20px;
 
-    .is-active {
-      color: var(--system-primary-text-color);
-      background-color: var(--system-primary-color) !important;
+    &::before {
+      content: '';
     }
   }
+}
+
+:deep() {
+  .el-table {
+    color: var(--system-page-color);
+    --el-table-tr-bg-color: var(--system-page-background);
+    --el-table-bg-color: var(--system-page-background);
+    --el-table-header-bg-color: var(--system-page-background);
+    --el-table-border-color: var(--system-page-border-color);
+    --el-table-row-hover-bg-color: var(--system-container-background);
+    --el-bg-color: var(--system-page-background) !important; //左边固定栏背景色
+
+  }
+
+  // 分页器
+  .el-input__wrapper,
+  .btn-prev,
+  .btn-next,
+  .number {
+    background-color: var(--system-page-background) !important;
+    color: var(--system-page-color);
+    border-color: var(--system-page-border-color);
+  }
+
+  .is-active {
+    color: var(--system-primary-text-color);
+    background-color: var(--system-primary-color) !important;
+  }
+}
 </style>

src/views/main/userModule/relieveLogsList.vue

@@ -171,8 +171,8 @@ const handleFormSubmitted = (formData) => {
 
   // 解封时间
   if (formData.deblockingTime) {
-    formSearch.value.deblockingTimeBegin = formData.deblockingTime[0];
-    formSearch.value.deblockingTimeEnd = formData.deblockingTime[1];
+    formSearch.value.deblockingTimeBegin = convertUTCToBeijing(formData.deblockingTime[0], false);
+    formSearch.value.deblockingTimeEnd = convertUTCToBeijing(formData.deblockingTime[1], false);
   } else {
     formSearch.value.deblockingTimeBegin = undefined
     formSearch.value.deblockingTimeEnd = undefined

src/views/main/userModule/riskLogsList.vue

@@ -172,8 +172,8 @@
 
     // 封禁时间
     if (formData.bannedTime) {
-      formSearch.value.bannedTimeBegin = formData.bannedTime[0];
-      formSearch.value.bannedTimeEnd = formData.bannedTime[1];
+      formSearch.value.bannedTimeBegin = convertUTCToBeijing(formData.bannedTime[0], false);
+      formSearch.value.bannedTimeEnd = convertUTCToBeijing(formData.bannedTime[1], false);
     }else {
       formSearch.value.bannedTimeBegin = null
       formSearch.value.bannedTimeEnd = null

src/views/main/userModule/userList.vue

@@ -6,7 +6,7 @@
     <!-- 表格 -->
     <div class="layout-container">
       <Table @getTableData="changeTableData" v-model:page="page" ref="table" :data="tableData"
-        @selection-change="handleSelectionChange">
+        @selection-change="handleSelectionChange" :revenue="totalRevenue">
         <el-table-column prop="userId" label="查看ECPM" width="130" fixed="left">
           <template #default="scope">
             <el-button type="primary" @click="lookEcpm(scope.row.userId)">查看ECPM</el-button>
@@ -151,11 +151,11 @@
   import Table from "@/components/table/index.vue";
   import Layer from '@/components/layer/index.vue'
   import { ElMessage } from 'element-plus'
-  import { getUserList, riskBannedUser, riskLockUser, appUserEcpm } from '@/api/userModule.js'
+  import { getUserList, riskBannedUser, riskLockUser, appUserEcpm, getRevenueByTime } from '@/api/userModule.js'
   import { ditchList } from '@/api/outBagModule.js'
   import { appList } from "@/api/formworkErection.js";
   import { riskChangeUserStatus } from '@/api/riskModule.js'
-  import { convertUTCToBeijing, roundPrice } from '@/utils/index.js'
+  import { convertUTCToBeijing, roundPrice, getTodayRangeLocal } from '@/utils/index.js'
   import { useGetDictList } from '@/hooks/useGetDictList.js'
   import { useStore } from 'vuex'
 
@@ -178,7 +178,7 @@
     nickName: undefined,// 用户昵称
     userId: undefined,// 用户ID
     page: 1,// 当前页码
-    registryTimeBegin: new Date().toISOString(),// 注册时间
+    registryTimeBegin: getTodayRangeLocal(),// 注册时间
     registryTimeEnd: undefined,// 注册时间
     userStatus: 1,// 用户类型
     appIds: undefined, //所属应用
@@ -228,7 +228,7 @@
           defaultVal: 1,
           options: getOptions('user_status'),
         },
-        { label: '注册时间开始', prop: 'registryTimeBegin', type: 'date',defaultVal: new Date().toISOString() },
+        { label: '注册时间开始', prop: 'registryTimeBegin', type: 'date',defaultVal: getTodayRangeLocal() },
         { label: '注册时间结束', prop: 'registryTimeEnd', type: 'date' },
       ]
 
@@ -270,11 +270,22 @@
     dynamicFormItems.value[2].options = appsOptions
   }
 
+  const totalRevenue = ref(0)
+
   // 分页数据
   const getList = async () => {
     let res = await getUserList({ ...formSearch.value });
     tableData.value = res.data;
     page.total = res.pageMeta.total;
+
+    // 根据时间获取收益
+    const param = {
+      registryTimeBegin: formSearch.value.registryTimeBegin,
+      registryTimeEnd: formSearch.value.registryTimeEnd
+    }
+
+    let revenue = await getRevenueByTime({...param})
+    totalRevenue.value = roundPrice(revenue.data, 2, true)
   };
 
   const changeTableData = (type) => {
@@ -294,8 +305,8 @@
     formSearch.value.ditchId = formData.ditchId;
     formSearch.value.userStatus = formData.userStatus;
     formSearch.value.appIds = formData.appIds;
-    formSearch.value.registryTimeBegin = formData.registryTimeBegin || null
-    formSearch.value.registryTimeEnd = formData.registryTimeEnd || null
+    formSearch.value.registryTimeBegin = convertUTCToBeijing(formData.registryTimeBegin,false) || undefined
+    formSearch.value.registryTimeEnd = convertUTCToBeijing(formData.registryTimeEnd,false) || undefined
 
     getList();
   };