data-marketing-platform/src/views/count/device/location/dialog.vue

<template>
  <!-- 省市详情弹窗 -->
  <el-dialog v-model="props.dialogVisible" :title="`详细数据`" width="80%" :before-close="handleClose" destroy-on-close>
    <div class="province-detail">
      <div class="header">
        <ExportToCSV :hideToggle="true" :hideTable="true" :data="formatData" :columns="columns" :fileName="title" />
      </div>
      <div class="dialog-container">
        <ExportToCSV :size="10" :tableStyle="{ width: '100%', maxWidth: '1476px', margin: '0 auto' }"
          :hideToggle="true" :hideTable="false" :data="formatData" :columns="columns" :fileName="title" />
      </div>
    </div>
  </el-dialog>
</template>

<script lang="ts" name="device" setup>
import { ref, computed } from 'vue'
import ExportToCSV from '/@/views/count/components/ExportToCSV.vue'

const props = defineProps({
  provinceDetail: {
    type: Array,
    default: () => []
  },
  selectedProvince: {
    type: String,
    default: ''
  },
  dialogVisible: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['update:dialogVisible'])

// 关闭弹窗
const handleClose = () => {
  emit('update:dialogVisible', false)
}

const title = computed(() => {
  return props.selectedProvince + ' 详细数据'
})

// 定义表格列配置
const columns = [
  { prop: 'city', label: '城市' },
  { prop: 'newUser', label: '新增用户' },
  { prop: 'newUserPercentage', label: '新增用户占比' },
  { prop: 'activeUser', label: '活跃用户' },
  { prop: 'activeUserPercentage', label: '活跃用户占比' },
  { prop: 'startCount', label: '启动次数' },
  { prop: 'startCountPercentage', label: '启动次数占比' }
];

const formatData = computed(() => {
  console.log(`formatData: `);
  console.log(props.provinceDetail);
  return props.provinceDetail.map((item: any) => {
    return {
      city: item.name,
      newUser: item.value,
      newUserPercentage: `${item.value}%`,
      activeUser: item.value,
      activeUserPercentage: `${item.value}%`,
      startCount: item.value,
      startCountPercentage: `${item.value}%`
    }
  })
})
</script>

<style scoped lang="scss">
@import '/@/views/count/styles/common.scss';
.header {
  height: 30px;
}
</style>

<style lang="scss">
.el-overlay .el-overlay-dialog .el-dialog .el-dialog__body {
  padding: 0 !important;
}
.el-dialog__header {
  padding-bottom: 0!important;
}
</style>