antissoft / lvqianmeiye_ERP

  <template>
    <div class="NCC-common-layout">
      <div class="NCC-common-layout-center">
        <!-- 筛选条件 -->
        <el-row class="NCC-common-search-box" :gutter="16">
          <el-form @submit.native.prevent>
            <el-col :span="6">
              <el-form-item label="开始时间">
                <el-date-picker 
                  v-model="query.startTime" 
                  type="datetime" 
                  value-format="timestamp" 
                  format="yyyy-MM-dd HH:mm:ss" 
                  placeholder="开始时间"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="结束时间">
                <el-date-picker 
                  v-model="query.endTime" 
                  type="datetime" 
                  value-format="timestamp" 
                  format="yyyy-MM-dd HH:mm:ss" 
                  placeholder="结束时间"
                />
              </el-form-item>
            </el-col>

            <!-- <el-col :span="6">

              <el-form-item label="门店">
                <el-select
                  v-model="query.storeIds"
                  placeholder="请选择门店"
                  multiple
                  filterable
                  clearable
                  :style='{"width":"100%"}'>
                  <el-option
                    v-for="store in storeOptions"
                    :key="store.id"
                    :label="store.dm"
                    :value="store.id">
                  </el-option>
                </el-select>
              </el-form-item>

            </el-col> -->

            <el-col :span="6">
              <el-form-item label="拓客活动">
                <el-select
                  v-model="query.eventId"
                  placeholder="请选择拓客活动"
                  filterable
                  clearable
                  :style='{"width":"100%"}'>
                  <el-option
                    v-for="event in eventOptions"
                    :key="event.id"
                    :label="event.eventName"
                    :value="event.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="search()">查询</el-button>
                <el-button icon="el-icon-refresh-right" @click="reset()">重置</el-button>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
  
        <!-- 数据表格 -->
        <div class="NCC-common-layout-main NCC-flex-main">

          <el-table 
            v-loading="listLoading" 
            :data="list" 
            border 
            stripe 
            :height="tableHeight"
            @sort-change="handleSortChange">

            <el-table-column prop="StoreName" label="门店名称" min-width="150">
              <template slot-scope="scope">
                <i class="el-icon-shop" style="margin-right: 4px; color: #409EFF;"></i>

                <span 
                  class="store-name-link" 
                  @click="handleStoreNameClick(scope.row)"
                  style="cursor: pointer; color: #409EFF; text-decoration: underline;">
                  {{ scope.row.StoreName || '无' }}
                </span>

              </template>
            </el-table-column>

            <el-table-column prop="TotalCount" label="总人数" min-width="120" sortable="custom" >

              <template slot-scope="scope">
                <i class="el-icon-s-data" style="margin-right: 4px; color: #67C23A;"></i>
                <span>{{ scope.row.TotalCount !== null && scope.row.TotalCount !== undefined ? scope.row.TotalCount : 0 }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="TkMemberCount" label="拓客会员数" min-width="130" sortable="custom" >
              <template slot-scope="scope">
                <i class="el-icon-user-solid" style="margin-right: 4px; color: #409EFF;"></i>
                <span>{{ scope.row.TkMemberCount !== null && scope.row.TkMemberCount !== undefined ? scope.row.TkMemberCount : 0 }}</span>
              </template>
            </el-table-column>

            <el-table-column prop="InviteCount" label="沟通数" min-width="120" sortable="custom" >

              <template slot-scope="scope">
                <i class="el-icon-phone-outline" style="margin-right: 4px; color: #67C23A;"></i>
                <span>{{ scope.row.InviteCount !== null && scope.row.InviteCount !== undefined ? scope.row.InviteCount : 0 }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="AppointmentCount" label="预约数" min-width="120" sortable="custom" >
              <template slot-scope="scope">
                <i class="el-icon-date" style="margin-right: 4px; color: #67C23A;"></i>
                <span>{{ scope.row.AppointmentCount !== null && scope.row.AppointmentCount !== undefined ? scope.row.AppointmentCount : 0 }}</span>
              </template>
            </el-table-column>

            <el-table-column prop="ConsumeCount" label="耗卡数" min-width="120" sortable="custom" >

              <template slot-scope="scope">
                <i class="el-icon-shopping-cart-2" style="margin-right: 4px; color: #67C23A;"></i>
                <span>{{ scope.row.ConsumeCount !== null && scope.row.ConsumeCount !== undefined ? scope.row.ConsumeCount : 0 }}</span>
              </template>
            </el-table-column>

            <el-table-column prop="BillingCount" label="开单数(链路)" min-width="130" sortable="custom" >

              <template slot-scope="scope">
                <i class="el-icon-document" style="margin-right: 4px; color: #67C23A;"></i>
                <span>{{ scope.row.BillingCount !== null && scope.row.BillingCount !== undefined ? scope.row.BillingCount : 0 }}</span>
              </template>
            </el-table-column>

            <el-table-column prop="BillingAmount" label="开单金额(链路)" min-width="140" sortable="custom" >

              <template slot-scope="scope">
                <i class="el-icon-money" style="margin-right: 4px; color: #67C23A;"></i>
                <span class="amount-paid">¥{{ formatMoney(scope.row.BillingAmount) }}</span>
              </template>
            </el-table-column>

            <el-table-column prop="VisitCount" label="到店人数" min-width="120" sortable="custom" >
              <template slot-scope="scope">
                <i class="el-icon-location" style="margin-right: 4px; color: #409EFF;"></i>
                <span>{{ scope.row.VisitCount !== null && scope.row.VisitCount !== undefined ? scope.row.VisitCount : 0 }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="VisitRate" label="到店率" min-width="100" sortable="custom" >
              <template slot-scope="scope">
                <i class="el-icon-data-line" style="margin-right: 4px; color: #67C23A;"></i>
                <span>{{ formatPercentage(scope.row.VisitRate) }}%</span>
              </template>
            </el-table-column>
            <el-table-column prop="TotalBillingCount" label="开单数(全部)" min-width="130" sortable="custom" >
              <template slot-scope="scope">
                <i class="el-icon-document-copy" style="margin-right: 4px; color: #67C23A;"></i>
                <span>{{ scope.row.TotalBillingCount !== null && scope.row.TotalBillingCount !== undefined ? scope.row.TotalBillingCount : 0 }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="TotalBillingAmount" label="开单金额(全部)" min-width="140" sortable="custom" >
              <template slot-scope="scope">
                <i class="el-icon-coin" style="margin-right: 4px; color: #67C23A;"></i>
                <span class="amount-paid">¥{{ formatMoney(scope.row.TotalBillingAmount) }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="ConversionRate" label="成交率" min-width="100" sortable="custom" >
              <template slot-scope="scope">
                <i class="el-icon-data-analysis" style="margin-right: 4px; color: #67C23A;"></i>
                <span>{{ formatPercentage(scope.row.ConversionRate) }}%</span>
              </template>
            </el-table-column>

          </el-table>
        </div>
      </div>

  
      <!-- 线索池客户统计弹窗 -->
      <lead-customer-statistics-dialog
        :visible="dialogVisible"
        :initial-query="dialogQuery"
        @close="handleDialogClose"
      />

    </div>
  </template>
  
  <script>
  import request from '@/utils/request'
  import { getLqEventList } from '@/api/extend/lqevent'

  import LeadCustomerStatisticsDialog from './components/lead-customer-statistics-dialog.vue'

  
  export default {
    name: 'StoreStatistics',

    components: {
      LeadCustomerStatisticsDialog
    },

    data() {
      return {
        query: {
          startTime: undefined,
          endTime: undefined,
          storeIds: [],
          eventId: undefined
        },
        storeOptions: [],
        eventOptions: [],
        list: [],
        originalList: [], // 保存原始数据，用于取消排序时恢复
        listLoading: false,
        sortProp: '',

        sortOrder: '',
        dialogVisible: false,
        dialogQuery: {
          startTime: undefined,
          endTime: undefined,
          eventId: undefined,
          storeIds: []
        }

      }
    },

    computed: {
      // 计算表格高度
      tableHeight() {
        // 根据视口高度动态计算，减去筛选条件等的高度
        return 'calc(100vh - 280px)'
      }
    },

    created() {
      this.setDefaultTimeRange()
      this.initStoreOptions()
      this.initEventOptions()
      this.search()
    },
    methods: {
      // 设置默认时间范围（本月1号到现在）
      setDefaultTimeRange() {
        const now = new Date()
        const firstDayOfMonth = new Date(now.getFullYear(), now.getMonth(), 1)
        
        this.query.startTime = firstDayOfMonth.getTime()
        this.query.endTime = now.getTime()
      },
  
      // 初始化门店选项
      initStoreOptions() {
        request({
          url: '/api/Extend/LqMdxx',
          method: 'GET',
          data: {
            currentPage: 1,
            pageSize: 1000
          }
        }).then(res => {
          if (res.data && res.data.list) {
            this.storeOptions = res.data.list
          }
        }).catch(() => {
          this.storeOptions = []
        })
      },
  
      // 初始化拓客活动选项
      initEventOptions() {
        getLqEventList({
          page: 1,
          rows: 1000
        }).then(res => {
          if (res.code == 200 && res.data && res.data.list) {
            this.eventOptions = res.data.list
          } else {
            this.eventOptions = []
          }
        }).catch(() => {
          this.eventOptions = []
        })
      },
  
      // 处理排序变化
      handleSortChange({ column, prop, order }) {
        if (!order) {
          // 取消排序，恢复原始顺序
          this.sortProp = ''
          this.sortOrder = ''
          if (this.originalList.length > 0) {
            this.list = JSON.parse(JSON.stringify(this.originalList))
          }
          return
        }
        
        this.sortProp = prop
        this.sortOrder = order === 'ascending' ? 'asc' : 'desc'
        
        this.sortList()
      },
  
      // 对列表进行排序
      sortList() {
        if (!this.sortProp || !this.sortOrder) {
          return
        }
  
        // 从原始数据开始排序，确保每次排序都是基于原始数据
        const sourceList = this.originalList.length > 0 ? JSON.parse(JSON.stringify(this.originalList)) : JSON.parse(JSON.stringify(this.list))
        
        // 创建新数组并排序
        const sortedList = sourceList.sort((a, b) => {
          let aVal = a[this.sortProp]
          let bVal = b[this.sortProp]
  
          // 处理空值
          if (aVal === null || aVal === undefined) aVal = 0
          if (bVal === null || bVal === undefined) bVal = 0
  
          // 数值类型直接比较
          if (typeof aVal === 'number' && typeof bVal === 'number') {
            return this.sortOrder === 'asc' ? aVal - bVal : bVal - aVal
          }
  
          // 字符串类型
          aVal = String(aVal || '')
          bVal = String(bVal || '')
          
          if (this.sortOrder === 'asc') {
            return aVal.localeCompare(bVal)
          } else {
            return bVal.localeCompare(aVal)
          }
        })
        
        // 重新赋值整个数组以触发响应式更新
        this.list = sortedList
        this.$nextTick(() => {
          this.$forceUpdate()
        })
      },
  
      // 查询数据
      search() {
        this.listLoading = true
  
        const params = {}
  
        if (this.query.startTime) {
          params.startTime = this.formatDateTimeISO(this.query.startTime)
        }
  
        if (this.query.endTime) {
          params.endTime = this.formatDateTimeISO(this.query.endTime)
        }
  
        if (this.query.storeIds && this.query.storeIds.length > 0) {
          params.storeIds = this.query.storeIds
        }
  
        if (this.query.eventId) {
          params.eventId = this.query.eventId
        }
  
        request({
          url: '/api/Extend/lqstatistics/get-store-statistics-list',
          method: 'POST',
          data: params
        }).then(res => {
          if (res.data && res.data.list) {
            this.list = res.data.list
            this.originalList = [...res.data.list] // 保存原始数据
          } else {
            this.list = []
            this.originalList = []
          }
          this.listLoading = false
        }).catch(err => {
          console.error('查询失败:', err)
          this.$message({
            type: 'error',
            message: '查询失败，请重试',
            duration: 1500
          })
          this.listLoading = false
          this.list = []
          this.originalList = []
        })
      },
  
      // 重置查询条件
      reset() {
        this.query = {
          startTime: undefined,
          endTime: undefined,
          storeIds: [],
          eventId: undefined
        }
        this.setDefaultTimeRange()
        this.sortProp = ''
        this.sortOrder = ''
        this.list = []
        this.originalList = []
        this.search()
      },
  
      // 格式化金额
      formatMoney(amount) {
        if (!amount && amount !== 0) return '0.00'
        return Number(amount).toFixed(2)
      },
  

      // 格式化百分比
      formatPercentage(rate) {
        if (rate === null || rate === undefined) return '0.00'
        return Number(rate).toFixed(2)
      },
  

      // 格式化日期时间（用于API传参，ISO格式，保持本地时间不转换时区）
      formatDateTimeISO(timestamp) {
        if (!timestamp) return ''
        const date = new Date(timestamp)
        // 生成本地时间的 ISO 格式字符串，不进行时区转换
        // 使用本地时间的各个部分，格式化为 ISO 格式，末尾加 Z 以符合接口要求
        const year = date.getFullYear()
        const month = String(date.getMonth() + 1).padStart(2, '0')
        const day = String(date.getDate()).padStart(2, '0')
        const hours = String(date.getHours()).padStart(2, '0')
        const minutes = String(date.getMinutes()).padStart(2, '0')
        const seconds = String(date.getSeconds()).padStart(2, '0')
        const milliseconds = String(date.getMilliseconds()).padStart(3, '0')
        // 使用本地时间的值，格式化为 ISO 格式（末尾加 Z 以符合接口格式要求）
        return `${year}-${month}-${day}T${hours}:${minutes}:${seconds}.${milliseconds}Z`

      },
  
      // 处理门店名称点击事件
      handleStoreNameClick(row) {
        // 设置弹窗的查询条件：当前时间、活动、门店
        this.dialogQuery = {
          startTime: this.query.startTime,
          endTime: this.query.endTime,
          eventId: this.query.eventId,
          storeIds: row.StoreId ? [row.StoreId] : []
        }
        // 打开弹窗
        this.dialogVisible = true
      },
  
      // 处理弹窗关闭
      handleDialogClose() {
        this.dialogVisible = false

      }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .amount-paid {
    color: #67C23A;
    font-weight: 500;
  }

  
  .store-name-link {
    &:hover {
      color: #66b1ff !important;
    }
  }

  </style>