Browse Source

地区全部使用接口返回的数据;

zhaowenkang/feature-20260206140254-后台AI复盘二期
songjie 1 month ago
parent
commit
c639d825fc
  1. 36
      src/views/PlatformData/UserLoginStats.vue

36
src/views/PlatformData/UserLoginStats.vue

@ -24,8 +24,12 @@
<div class="search-label">地区</div> <div class="search-label">地区</div>
<el-select v-model="selectedRegion" placeholder="请选择所属地区" style="width: 200px; margin-right: 20px;"> <el-select v-model="selectedRegion" placeholder="请选择所属地区" style="width: 200px; margin-right: 20px;">
<el-option label="全部" value="all" /> <el-option label="全部" value="all" />
<el-option label="中国" value="cn" />
<el-option label="美国" value="us" />
<el-option
v-for="item in regionOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select> </el-select>
<div class="search-label">时间段查询</div> <div class="search-label">时间段查询</div>
@ -135,7 +139,15 @@
<!-- 搜索栏 --> <!-- 搜索栏 -->
<div class="search-bar"> <div class="search-bar">
<div class="search-label">地区查询</div> <div class="search-label">地区查询</div>
<el-input v-model="searchRegion" placeholder="请输入地区" style="width: 200px; margin-right: 20px;" />
<el-select v-model="searchRegion" placeholder="请选择所属地区" style="width: 200px; margin-right: 20px;">
<el-option label="全部" value="" />
<el-option
v-for="item in regionOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
<div class="search-label">时间段查询</div> <div class="search-label">时间段查询</div>
<el-date-picker <el-date-picker
@ -223,7 +235,7 @@
import { ref, onMounted, nextTick, watch } from 'vue'; import { ref, onMounted, nextTick, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router'; import { useRoute, useRouter } from 'vue-router';
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import { getUserLoginList, getUserLoginTrend, getRegionActiveData, getRegionActiveDataHistogram, getUserLoginChannel, getUserLoginChannelMember, getUserLoginChannelNoMember, getRegionUserDistribution, exportRegionActiveData } from '../../api/platformData';
import { getUserLoginList, getUserLoginTrend, getRegionActiveData, getRegionActiveDataHistogram, getUserLoginChannel, getUserLoginChannelMember, getUserLoginChannelNoMember, getRegionUserDistribution, exportRegionActiveData, getRegionsList } from '../../api/platformData';
import { ElMessage } from 'element-plus'; import { ElMessage } from 'element-plus';
const route = useRoute(); const route = useRoute();
@ -252,6 +264,21 @@ const barChartMode = ref('all');
const regionalTableData1 = ref([]); const regionalTableData1 = ref([]);
const regionalTableData2 = ref([]); const regionalTableData2 = ref([]);
const regionalTableData3 = ref([]); const regionalTableData3 = ref([]);
const regionOptions = ref([]);
//
const fetchRegionOptions = async () => {
try {
const res = await getRegionsList();
console.log("获取地区列表响应:", res);
const data = res.data || res;
if (data && data.list) {
regionOptions.value = data.list.map(region => ({ label: region, value: region }));
}
} catch (e) {
console.error('获取地区列表失败:', e);
}
};
// //
const initQueryParams = () => { const initQueryParams = () => {
@ -1023,6 +1050,7 @@ onMounted(() => {
if (activeTab.value === 'loginData') { if (activeTab.value === 'loginData') {
fetchAllLoginData(); fetchAllLoginData();
} }
fetchRegionOptions();
initCharts(); initCharts();
}); });
</script> </script>

Loading…
Cancel
Save