优化
This commit is contained in:
pengxiaolong
@@ -1,15 +1,14 @@
|
||||
<template>
|
||||
<div class="hostList">
|
||||
<div>
|
||||
<!-- -->
|
||||
<!-- -->
|
||||
<div style="display: flex">
|
||||
|
||||
<div></div>
|
||||
<el-input
|
||||
v-model="queryFormData.coinMin"
|
||||
placeholder="最小金币"
|
||||
size="large"
|
||||
style="width: 160px;"
|
||||
style="width: 160px"
|
||||
type="number"
|
||||
/>
|
||||
|
||||
@@ -37,13 +36,19 @@
|
||||
type="number"
|
||||
/>
|
||||
|
||||
<div style="width: 250px; margin-left: 50px;height: 50px;line-height: 50px;">当前网络：{{ countryData }}</div>
|
||||
<div style="width: 160px; margin-left: 50px;height: 50px;line-height: 50px;">总数：{{ getBrotherInfodata.total }}</div>
|
||||
<div style="width: 160px; margin-left: 50px;height: 50px;line-height: 50px;">有效数：{{ getBrotherInfodata.valid }}</div>
|
||||
<div style="width: 250px; margin-left: 50px; height: 50px; line-height: 50px">
|
||||
当前网络：{{ countryData }}
|
||||
</div>
|
||||
<div style="width: 160px; margin-left: 50px; height: 50px; line-height: 50px">
|
||||
总数：{{ getBrotherInfodata.total }}
|
||||
</div>
|
||||
<div style="width: 160px; margin-left: 50px; height: 50px; line-height: 50px">
|
||||
有效数：{{ getBrotherInfodata.valid }}
|
||||
</div>
|
||||
|
||||
<el-button
|
||||
class="serch-button"
|
||||
style="margin-left: 50px ;"
|
||||
style="margin-left: 50px"
|
||||
type="primary"
|
||||
@click="Resetss"
|
||||
>重置</el-button
|
||||
@@ -51,7 +56,7 @@
|
||||
|
||||
<el-button
|
||||
class="serch-button"
|
||||
style="margin-left: 50px ; width: 150px"
|
||||
style="margin-left: 50px; width: 150px"
|
||||
type="primary"
|
||||
@click="openTikTok"
|
||||
>打开 TikTok 登录</el-button
|
||||
@@ -76,13 +81,13 @@
|
||||
<!-- `````````````````````````````````````````````````````````````````````````````````````````````````` -->
|
||||
<div style="width: 100%; border-bottom: 1px solid #e9e9e9; margin-top: 30px"></div>
|
||||
<!-- ···································································································· -->
|
||||
<div style="display: flex; margin-top: 30px;flex-wrap: wrap;">
|
||||
<div style="display: flex; margin-top: 30px; flex-wrap: wrap">
|
||||
<el-select
|
||||
v-model="searchForm.region"
|
||||
filterable
|
||||
placeholder="选择国家"
|
||||
size="large"
|
||||
style="width: 160px;"
|
||||
style="width: 160px"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
@@ -96,13 +101,13 @@
|
||||
v-model="searchForm.displayId"
|
||||
placeholder="大哥id"
|
||||
size="large"
|
||||
style="width: 160px; margin-left: 50px;"
|
||||
style="width: 160px; margin-left: 50px"
|
||||
clearable
|
||||
/>
|
||||
|
||||
<el-button
|
||||
class="serch-button"
|
||||
style="margin-left: 50px;"
|
||||
style="margin-left: 50px"
|
||||
type="primary"
|
||||
@click="serch"
|
||||
>查询</el-button
|
||||
@@ -117,8 +122,13 @@
|
||||
@click="exportList"
|
||||
>导出Excel数据</el-button
|
||||
>
|
||||
<el-button @click="filterdialogVisible = true" style="width: 50px;" class="put-button" type="primary"><img
|
||||
style="height: 30px;" src="@/assets/filter.png"></el-button>
|
||||
<el-button
|
||||
@click="filterdialogVisible = true"
|
||||
style="width: 50px"
|
||||
class="put-button"
|
||||
type="primary"
|
||||
><img style="height: 30px" src="@/assets/filter.png"
|
||||
/></el-button>
|
||||
<!-- <el-button @click="filterdialogVisible = true" style="width: 50px;" class="put-button" type="primary"><img
|
||||
style="height: 30px;" src="@/assets/filter.png"></el-button> -->
|
||||
</div>
|
||||
@@ -151,7 +161,6 @@
|
||||
>
|
||||
<template v-if="label.paramCode != 'createDt'" #default="scope"> </template>
|
||||
</el-table-column>
|
||||
|
||||
</el-table>
|
||||
</div>
|
||||
<!-- ······································································································································ -->
|
||||
@@ -171,86 +180,108 @@
|
||||
|
||||
<!-- ·······································································弹窗······································································· -->
|
||||
<el-dialog v-model="filterdialogVisible" width="800px" :before-close="handleClose">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="4">
|
||||
<!-- <label>选择筛选条件</label> -->
|
||||
<div style="height: 100%; padding-top: 10px" class="center-justify">时间</div>
|
||||
</el-col>
|
||||
<el-col :span="10">
|
||||
<div><label>开始时间/结束时间</label></div>
|
||||
|
||||
<el-date-picker
|
||||
v-model="createTimes"
|
||||
type="datetimerange"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
placeholder="选择查询时间"
|
||||
size="large"
|
||||
style="width: 600px; margin-top: 10px"
|
||||
/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row
|
||||
v-for="(field, index) in fields"
|
||||
:key="index"
|
||||
:gutter="20"
|
||||
style="margin-bottom: 10px"
|
||||
>
|
||||
<el-col :span="4">
|
||||
<div style="height: 100%" class="center-justify">
|
||||
{{ field.label }}
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="10">
|
||||
<div><label>最小值</label></div>
|
||||
<el-input
|
||||
type="number"
|
||||
:oninput="'if(value.length>9)value=value.slice(0,9)'"
|
||||
v-model.number="searchForm[field.minModel]"
|
||||
placeholder="请输入最小值"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col :span="10">
|
||||
<div><label>最大值</label></div>
|
||||
<el-input
|
||||
type="number"
|
||||
:oninput="'if(value.length>9)value=value.slice(0,9)'"
|
||||
v-model.number="searchForm[field.maxModel]"
|
||||
placeholder="请输入最大值"
|
||||
/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="4">
|
||||
<!-- <label>选择筛选条件</label> -->
|
||||
<div style="height: 100%; padding-top: 10px" class="center-justify">
|
||||
时间
|
||||
</div>
|
||||
<el-col :span="4">
|
||||
<!-- <label>选择筛选条件</label> -->
|
||||
<div style="height: 100%; padding-top: 10px" class="center-justify">排序</div>
|
||||
</el-col>
|
||||
<el-col :span="10">
|
||||
<div><label>排序类型</label></div>
|
||||
|
||||
</el-col>
|
||||
<el-col :span="10">
|
||||
<div><label>开始时间/结束时间</label></div>
|
||||
<el-select
|
||||
v-model="sortData.sortName"
|
||||
filterable
|
||||
placeholder="请选择"
|
||||
style="width: 240px"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in sortNameOptions"
|
||||
:key="item.type"
|
||||
:label="item.label"
|
||||
:value="item.type"
|
||||
/>
|
||||
</el-select>
|
||||
</el-col>
|
||||
<el-col :span="10">
|
||||
<div><label>升序/降序</label></div>
|
||||
|
||||
<el-date-picker
|
||||
v-model="createTimes"
|
||||
type="datetimerange"
|
||||
value-format="YYYY-MM-DD"
|
||||
placeholder="选择查询时间"
|
||||
size="large"
|
||||
style="width: 600px;margin-top: 10px"
|
||||
/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-select
|
||||
v-model="sortData.sort"
|
||||
filterable
|
||||
placeholder="请选择"
|
||||
style="width: 240px"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in [
|
||||
{ label: '升序', value: 'asc' },
|
||||
{ label: '降序', value: 'desc' },
|
||||
]"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row v-for="(field, index) in fields" :key="index" :gutter="20" style="margin-bottom: 10px">
|
||||
<el-col :span="4">
|
||||
<div style="height: 100%;" class="center-justify">
|
||||
{{ field.label }}
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="10">
|
||||
<div><label>最小值</label></div>
|
||||
<el-input type="number" :oninput="'if(value.length>9)value=value.slice(0,9)'"
|
||||
v-model.number="searchForm[field.minModel]" placeholder="请输入最小值" />
|
||||
</el-col>
|
||||
<el-col :span="10">
|
||||
<div><label>最大值</label></div>
|
||||
<el-input type="number" :oninput="'if(value.length>9)value=value.slice(0,9)'"
|
||||
v-model.number="searchForm[field.maxModel]" placeholder="请输入最大值" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="4">
|
||||
<!-- <label>选择筛选条件</label> -->
|
||||
<div style="height: 100%;padding-top: 10px;" class="center-justify">
|
||||
排序
|
||||
</div>
|
||||
|
||||
</el-col>
|
||||
<el-col :span="10">
|
||||
<div><label>排序类型</label></div>
|
||||
|
||||
|
||||
<el-select v-model="sortData.sortName" filterable placeholder="请选择" style="width: 240px">
|
||||
<el-option v-for="item in sortNameOptions" :key="item.type" :label="item.label" :value="item.type" />
|
||||
</el-select>
|
||||
|
||||
</el-col>
|
||||
<el-col :span="10">
|
||||
<div><label>升序/降序</label></div>
|
||||
|
||||
<el-select v-model="sortData.sort" filterable placeholder="请选择" style="width: 240px">
|
||||
<el-option v-for="item in [{ label: '升序', value: 'asc' }, { label: '降序', value: 'desc' }]" :key="item.value"
|
||||
:label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button type="primary" @click="reset">
|
||||
重置
|
||||
</el-button>
|
||||
<!-- <el-button @click="filterdialogVisible = false">取消</el-button> -->
|
||||
<el-button type="primary" @click="handelClick">
|
||||
确认
|
||||
</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button type="primary" @click="reset"> 重置 </el-button>
|
||||
<!-- <el-button @click="filterdialogVisible = false">取消</el-button> -->
|
||||
<el-button type="primary" @click="handelClick"> 确认 </el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -268,46 +299,45 @@ import {
|
||||
getCountryinfo,
|
||||
accountName,
|
||||
} from "@/api/account";
|
||||
import { usePythonBridge} from "@/utils/pythonBridge";
|
||||
import { usePythonBridge } from "@/utils/pythonBridge";
|
||||
import { getUser, setSerch, getSerch } from "@/utils/storage";
|
||||
import { ref, reactive, onMounted } from "vue";
|
||||
import EChartsComponent from "@/components/EChartsComponent.vue";
|
||||
import { ElMessage, ElMessageBox } from "element-plus";
|
||||
import { color } from "echarts";
|
||||
import { getCountryName } from '@/utils/countryUtil'
|
||||
import { getCountryName } from "@/utils/countryUtil";
|
||||
|
||||
//ip国家
|
||||
let countryData = ref('');
|
||||
let countryData = ref("");
|
||||
//获取国家
|
||||
const getIpInfo = async () => {
|
||||
try {
|
||||
const response = await fetch('https://ipapi.co/json/');
|
||||
if (!response.ok) {
|
||||
throw new Error('请求失败');
|
||||
}
|
||||
const data = await response.json();
|
||||
console.log('IP信息:', data.country);
|
||||
|
||||
countryData.value = getCountryName(data.country);
|
||||
} catch (error) {
|
||||
console.error('请求出错:', error);
|
||||
ElMessageBox.prompt('请输入将要获取国家的中文名', '获取国家失败', {
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
showClose: false,
|
||||
closeOnClickModal: false,
|
||||
showCancelButton: false,
|
||||
})
|
||||
.then(({ value }) => {
|
||||
countryData.value = value
|
||||
})
|
||||
// .catch(() => {
|
||||
// ElMessage({
|
||||
// type: 'info',
|
||||
// message: 'Input canceled',
|
||||
// })
|
||||
// })
|
||||
try {
|
||||
const response = await fetch("https://ipapi.co/json/");
|
||||
if (!response.ok) {
|
||||
throw new Error("请求失败");
|
||||
}
|
||||
const data = await response.json();
|
||||
console.log("IP信息:", data.country);
|
||||
|
||||
countryData.value = getCountryName(data.country);
|
||||
} catch (error) {
|
||||
console.error("请求出错:", error);
|
||||
ElMessageBox.prompt("请输入将要获取国家的中文名", "获取国家失败", {
|
||||
confirmButtonText: "确认",
|
||||
cancelButtonText: "取消",
|
||||
showClose: false,
|
||||
closeOnClickModal: false,
|
||||
showCancelButton: false,
|
||||
}).then(({ value }) => {
|
||||
countryData.value = value;
|
||||
});
|
||||
// .catch(() => {
|
||||
// ElMessage({
|
||||
// type: 'info',
|
||||
// message: 'Input canceled',
|
||||
// })
|
||||
// })
|
||||
}
|
||||
};
|
||||
//打开TikTok登录
|
||||
function openTikTok() {
|
||||
@@ -315,7 +345,7 @@ function openTikTok() {
|
||||
}
|
||||
//重置
|
||||
function Resetss() {
|
||||
queryFormData.value = {}
|
||||
queryFormData.value = {};
|
||||
}
|
||||
//大哥climb
|
||||
const queryFormData = ref({
|
||||
@@ -326,41 +356,47 @@ const queryFormData = ref({
|
||||
isRunning: true,
|
||||
});
|
||||
//时间
|
||||
const timerId = ref(null)
|
||||
const timerId = ref(null);
|
||||
const getBrotherInfodata = ref({
|
||||
total: 0,
|
||||
valid: 0,
|
||||
})
|
||||
});
|
||||
|
||||
function BigBrotherstop() {
|
||||
queryFormData.value.tenantId = userInfo.value.tenantId;
|
||||
queryFormData.value.region = countryData.value;
|
||||
controlTask(JSON.stringify(queryFormData.value)).then(res => {
|
||||
controlTask(JSON.stringify(queryFormData.value)).then((res) => {
|
||||
queryFormData.value.isRunning = true;
|
||||
clearInterval(timerId.value)
|
||||
timerId.value = null
|
||||
})
|
||||
clearInterval(timerId.value);
|
||||
timerId.value = null;
|
||||
});
|
||||
}
|
||||
function getBigBrother() {
|
||||
queryFormData.value.tenantId = userInfo.value.tenantId;
|
||||
queryFormData.value.region = countryData.value;
|
||||
controlTask(JSON.stringify(queryFormData.value)).then(res => {
|
||||
controlTask(JSON.stringify(queryFormData.value)).then((res) => {
|
||||
queryFormData.value.isRunning = false;
|
||||
timerId.value = setInterval(() => {
|
||||
getBrotherInfo().then(res => {
|
||||
getBrotherInfo().then((res) => {
|
||||
getBrotherInfodata.value = res;
|
||||
})
|
||||
}, 1000)
|
||||
})
|
||||
});
|
||||
}, 1000);
|
||||
});
|
||||
}
|
||||
|
||||
const loading = ref(false);
|
||||
//py方法
|
||||
const { givePyAnchorId, exportToExcel, loginTikTok , controlTask , getBrotherInfo } = usePythonBridge();
|
||||
const {
|
||||
givePyAnchorId,
|
||||
exportToExcel,
|
||||
loginTikTok,
|
||||
controlTask,
|
||||
getBrotherInfo,
|
||||
} = usePythonBridge();
|
||||
|
||||
let num = ref(0);
|
||||
//账号信息
|
||||
const userInfo = ref(getUser());
|
||||
const userInfo = ref({});
|
||||
//主播列表DOM
|
||||
const multipleTableRef = ref(null);
|
||||
let labelList = ref([
|
||||
@@ -430,18 +466,24 @@ let options = ref([]);
|
||||
let version = ref("0.0.0");
|
||||
|
||||
onMounted(() => {
|
||||
getCountry(); //获取国家
|
||||
// getSerchStorage();//获取搜索条件
|
||||
getlist();//获取主播列表
|
||||
getIpInfo();
|
||||
setTimeout(() => {
|
||||
getUserdata();
|
||||
}, 500);
|
||||
});
|
||||
|
||||
async function getUserdata() {
|
||||
const User = await getUser();
|
||||
userInfo.value = User;
|
||||
getCountry(); //获取国家
|
||||
getlist(); //获取主播列表
|
||||
getIpInfo();
|
||||
}
|
||||
|
||||
function serch() {
|
||||
page.value = 1;
|
||||
getlist();
|
||||
}
|
||||
|
||||
|
||||
function exportList() {
|
||||
// if (searchForm.value.dataType == "InvitationType") {
|
||||
// searchForm.value.dataEnd = searchForm.value.dataStart;
|
||||
@@ -482,11 +524,11 @@ function handleSelectionChange(data) {
|
||||
//时间格式化
|
||||
function formatDate(date) {
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从 0开始，需要+1
|
||||
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 month = String(date.getMonth() + 1).padStart(2, "0"); // 月份从 0开始，需要+1
|
||||
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");
|
||||
|
||||
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
||||
}
|
||||
@@ -501,8 +543,8 @@ const getlist = () => {
|
||||
sortName: sortData.value.sortName, //排序类型
|
||||
current: page.value,
|
||||
pageSize: pageSize.value,
|
||||
createTimeStart:createTimes.value[0],
|
||||
createTimeEnd:createTimes.value[1],
|
||||
createTimeStart: createTimes.value[0],
|
||||
createTimeEnd: createTimes.value[1],
|
||||
...searchForm.value, //筛选条件
|
||||
}).then((res) => {
|
||||
loading.value = false;
|
||||
@@ -512,15 +554,15 @@ const getlist = () => {
|
||||
console.log(res.records);
|
||||
total.value = Number(res.total);
|
||||
tableData.value = res.records.map((item) => ({
|
||||
level: item.level,// 等级
|
||||
createTime:formatDate(new Date(item.createTime)),// 创建时间
|
||||
followerCount: item.followerCount,// 粉丝数
|
||||
followingCount: item.followingCount,// 关注数
|
||||
hostDisplayId: item.hostDisplayId,// 所在直播间主播id
|
||||
hostcoins: item.hostcoins,// 打赏的金币
|
||||
region: item.region,// 地区
|
||||
totalGiftCoins: item.totalGiftCoins,// 打赏金币总和
|
||||
userIdStr: item.userIdStr,// 用户id
|
||||
level: item.level, // 等级
|
||||
createTime: formatDate(new Date(item.createTime)), // 创建时间
|
||||
followerCount: item.followerCount, // 粉丝数
|
||||
followingCount: item.followingCount, // 关注数
|
||||
hostDisplayId: item.hostDisplayId, // 所在直播间主播id
|
||||
hostcoins: item.hostcoins, // 打赏的金币
|
||||
region: item.region, // 地区
|
||||
totalGiftCoins: item.totalGiftCoins, // 打赏金币总和
|
||||
userIdStr: item.userIdStr, // 用户id
|
||||
displayId: item.displayId,
|
||||
}));
|
||||
}
|
||||
@@ -530,9 +572,9 @@ function handelClick() {
|
||||
filterdialogVisible.value = false;
|
||||
}
|
||||
function reset() {
|
||||
searchForm.value = {}
|
||||
sortData.value = { sortName: "createTime", sort: "desc" }
|
||||
createTimes.value = []
|
||||
searchForm.value = {};
|
||||
sortData.value = { sortName: "createTime", sort: "desc" };
|
||||
createTimes.value = [];
|
||||
}
|
||||
function handleClose(done) {
|
||||
console.log("关闭");
|
||||
@@ -577,7 +619,7 @@ function filterTag(value, row) {
|
||||
function getCountry() {
|
||||
getCountryinfo({})
|
||||
.then((res) => {
|
||||
console.log('````````国家`````````',res);
|
||||
console.log("````````国家`````````", res);
|
||||
res.forEach((item) => {
|
||||
if (item.countryGroupName) {
|
||||
options.value.push({
|
||||
@@ -586,7 +628,7 @@ function getCountry() {
|
||||
});
|
||||
}
|
||||
});
|
||||
console.log('````````国家2`````````', options.value);
|
||||
console.log("````````国家2`````````", options.value);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log("getCountry", err);
|
||||
@@ -650,7 +692,7 @@ function closePopover(hostId, paramCode) {
|
||||
|
||||
function openHTML(id) {
|
||||
console.log(id);
|
||||
|
||||
|
||||
givePyAnchorId(id);
|
||||
|
||||
// upholdinfo({
|
||||
|
||||
Reference in New Issue
Block a user