pxl/tk-page-Fan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化

Browse Source
This commit is contained in:
pengxiaolong
2025-07-03 19:14:34 +08:00
parent 01e9c26821
commit 52415dee0b
10 changed files with 622 additions and 498 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
package-lock.json generated
View File

@@ -12,7 +12,7 @@
"core-js": "^3.8.3",
"echarts": "^5.6.0",
"element-plus": "^2.9.7",
"pinia": "^3.0.1",
"pinia": "^3.0.3",
"qwebchannel": "^6.2.0",
"vue": "^3.2.13",
"vue-router": "^4.0.3",
@@ -9709,9 +9709,9 @@
}
},
"node_modules/pinia": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/pinia/-/pinia-3.0.1.tgz",
"integrity": "sha512-WXglsDzztOTH6IfcJ99ltYZin2mY8XZCXujkYWVIJlBjqsP6ST7zw+Aarh63E1cDVYeyUcPCxPHzJpEOmzB6Wg==",
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/pinia/-/pinia-3.0.3.tgz",
"integrity": "sha512-ttXO/InUULUXkMHpTdp9Fj4hLpD/2AoJdmAbAeW2yu1iy1k+pkFekQXw5VpC0/5p51IOR/jDaDRfRWRnMMsGOA==",
"license": "MIT",
"dependencies": {
"@vue/devtools-api": "^7.7.2"

2
package.json
View File

@@ -11,7 +11,7 @@
"core-js": "^3.8.3",
"echarts": "^5.6.0",
"element-plus": "^2.9.7",
"pinia": "^3.0.1",
"pinia": "^3.0.3",
"qwebchannel": "^6.2.0",
"vue": "^3.2.13",
"vue-router": "^4.0.3",

2
src/api/account.js
View File

@@ -1,5 +1,5 @@
import { getAxios, postAxios, downFile } from '@/utils/axios.js'
import { ElMessage } from 'element-plus';
//租户获取登录id
export function rentgetloginID(data) {
return getAxios({ url: `/api/tenant/get-id-by-name?name=${data.name}`})

7
src/main.js
View File

@@ -7,16 +7,13 @@ import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'; // 引入中文语言包
// createApp(App).use(store).use(router).mount('#app')
const app = createApp(App);
app.use(ElementPlus, {
locale: zhCn, // 配置中文
});
app.use(ElementPlus) // 注册 ElementPlus
app.use(createPinia()); // 注册 Pinia
app.use(store); // 注册 store
app.use(router); // 注册 router
app.mount('#app');
app.mount('#app');

27
src/stores/notice.js
View File

@@ -9,4 +9,29 @@ export const noticeStore = defineStore('noticeNum', {
this.data.num++;
},
},
});
});
export const tokenStore = defineStore('token', {
state: () => {
return { token: '' }
},
// 也可以这样定义
// state: () => ({ count: 0 })
actions: {
setToken(token){
this.token = token
}
},
})
export const UserStore = defineStore('User', {
state: () => {
return { user: {} }
},
// 也可以这样定义
// state: () => ({ count: 0 })
actions: {
setUser(user){
this.user = user
}
},
})

27
src/utils/axios.js
View File

@@ -8,6 +8,12 @@ import router from '@/router'
import { ElMessage } from 'element-plus';
import { usePythonBridge, } from '@/utils/pythonBridge'
import { ref } from 'vue';
import { defineStore } from 'pinia'
import { tokenStore,UserStore } from '@/stores/notice'
const { stopScript } = usePythonBridge();
@@ -17,31 +23,34 @@ let baseURL = ''
if (process.env.NODE_ENV === 'development') {
// 生产环境
// baseURL = "https://api.tkpage.yolozs.com"
baseURL = "http://47.79.98.113:8101"
// baseURL = "http://47.79.98.113:8101"
// baseURL = "http://192.168.0.103:8085/"
baseURL = "http://192.168.1.174:8101"
} else {
// 测试环境
// baseURL = "http://120.26.251.180:8085/"
// 开发环境
// baseURL = "https://api.tkpage.yolozs.com"
baseURL = "http://47.79.98.113:8101"
// baseURL = "http://47.79.98.113:8101"
baseURL = "http://192.168.1.174:8101"
// baseURL = "http://api.tkpage.vvtiktok.cn"
}
// 请求拦截器
axios.interceptors.request.use((config) => {
const tokenCache = tokenStore()
console.log("config", config)
const url = sliceUrl(config.url)
console.log("url", url)
if (!(config.url == 'bigbrother-doLogin' || config.url == 'get-id-by-name')) {
config.headers['vvtoken'] = getToken();
}
// 请求超时时间 - 毫秒
config.timeout = 60000
config.baseURL = baseURL
// 自定义Content-type
config.headers['Content-type'] = 'application/json'
if (!(config.url == 'bigbrother-doLogin' || config.url == 'get-id-by-name')) {
config.headers['vvtoken'] = tokenCache.token;
}
return config;
}, (error) => {
return Promise.reject(error)
@@ -136,9 +145,11 @@ export const downFile = async (urlstr, data) => {
}
//请求前验证
function cheekalive() {
const userCache = UserStore()
const tokenCache = tokenStore()
axios.post('api/account/cheekalive', {
userId: getUser().userId,
currcode: getToken(),
userId: userCache.user.id,
currcode: tokenCache.token,
},
{
headers: {

44
src/utils/pythonBridge.js
View File

@@ -38,6 +38,43 @@ export function usePythonBridge() {
// });
// };
//删除前端储存数据
const deleteStorageData = (data) => {
return new Promise((resolve, reject) => {
if (pyBridge.value) {
pyBridge.value.deleteAccountInfo(JSON.stringify(data),function (result) {
resolve(result);
});
}else{
console.log("pyBridge is null未连接上")
}
});
};
//获取前端储存数据
const getStorageData = (data) => {
return new Promise((resolve, reject) => {
if (pyBridge.value) {
pyBridge.value.readAccountInfo(JSON.stringify(data),function (result) {
resolve(result);
});
}else{
console.log("pyBridge is null未连接上")
}
});
};
//设置前端储存数据
const setStorageData = (data) => {
return new Promise((resolve, reject) => {
if (pyBridge.value) {
pyBridge.value.storageAccountInfo(JSON.stringify(data),function (result) {
resolve(result);
});
}else{
console.log("pyBridge is null未连接上")
}
});
};
// 查询获取大哥的数据
const controlTask = (data) => {
@@ -58,7 +95,6 @@ export function usePythonBridge() {
if (pyBridge.value) {
pyBridge.value.getBrotherInfo(function (result) {
resolve(JSON.parse(result));
// ElMessage.success(result);
});
}else{
console.log("pyBridge is null未连接上")
@@ -92,7 +128,6 @@ export function usePythonBridge() {
const givePyAnchorId = (id) => {
console.log("id",id);
if (pyBridge.value) {
ElMessage.success(id);
pyBridge.value.givePyAnchorId(id, function (result) {
});
}
@@ -155,6 +190,9 @@ export function usePythonBridge() {
controlTask,
getBrotherInfo,
getVersion,
givePyAnchorId
givePyAnchorId,
getStorageData,
setStorageData,
deleteStorageData,
};
}

74
src/utils/storage.js
View File

@@ -1,54 +1,70 @@
export function setToken(token) {
localStorage.setItem('token', token);
import { usePythonBridge} from "@/utils/pythonBridge";
const { getStorageData, setStorageData,deleteStorageData} = usePythonBridge();
import { ElMessage } from 'element-plus';
export async function setToken(token) {
const res = await setStorageData({key: 'token',data: token}).then(res => {
});
}
export function getToken() {
return localStorage.getItem('token');
export async function getToken() {
const res = await getStorageData({ key: 'token' });
return JSON.parse(res);
}
export function removeToken() {
localStorage.removeItem('token');
export async function removeToken() {
const res = deleteStorageData({key: 'token'});
}
export function setUser(user) {
localStorage.setItem('user', JSON.stringify(user));
export async function setUser(user) {
const res = await setStorageData({key: 'user',data: user}).then(res => {
});
}
export function getUser() {
return JSON.parse(localStorage.getItem('user'));
export async function getUser() {
const res = await getStorageData({ key: 'user' });
return JSON.parse(res);
}
export function setNumData(numData) {
localStorage.setItem('num', JSON.stringify(numData));
export async function setNumData(numData) {
const res = await setStorageData({key: 'num',data: numData})
}
export function getNumData() {
return JSON.parse(localStorage.getItem('num'));
export async function getNumData() {
const res = await getStorageData({ key: 'num' });
return JSON.parse(res);
}
// 导出一个函数，用于设置用户密码
export function setUserPass(userdata) {
localStorage.setItem('userPass', JSON.stringify(userdata));
export async function setUserPass(userdata) {
const res = await setStorageData({key: 'userPass',data:userdata})
}
// 导出一个函数，用于获取用户密码
export function getUserPass() {
return JSON.parse(localStorage.getItem('userPass'));
export async function getUserPass() {
const res = await getStorageData({ key: 'userPass' });
return JSON.parse(res);
}
// 用于设置tk账户密码
export function setTkUser(userdata) {
localStorage.setItem('tkuser', JSON.stringify(userdata));
export async function setTkUser(userdata) {
const res = await setStorageData({key: 'tkuser',data: userdata})
}
// 用于获取tk账户密码
export function getTkUser() {
return JSON.parse(localStorage.getItem('tkuser'));
export async function getTkUser() {
const res = await getStorageData({ key: 'tkuser' });
return JSON.parse(res);
}
// 用于列表筛选条件
export function setSerch(data) {
localStorage.setItem('Serch', JSON.stringify(data));
export async function setSerch(data) {
const res = await setStorageData({key: 'Serch',data: data})
}
// 用于获取列表筛选条件
export function getSerch() {
return JSON.parse(localStorage.getItem('Serch'));
}
export async function getSerch() {
const res = await getStorageData({ key: 'Serch' });
return JSON.parse(res);
}

565
src/views/HomeView.vue
View File

@@ -1,356 +1,351 @@
<template>
<div class="main">
<div class="container">
<div class="right">
<img src="../assets/logoBg.png" class="background-video" alt="">
<!-- 设置 -->
<div class="center-align">
<div></div>
<div class="setup">
<div class="setup-item center-justify">
<div></div>
<span>
网络设置
</span>
</div>
<div class="setup-item center-justify">
<div></div>
<span>
简体中文
</span>
</div>
</div>
</div>
<div class="center-line" style="margin-top: 40px;">
<!-- logo -->
<div class="logo">
<!-- <div class="center-justify" style="height: 80px; width: 300px;">
<div class="main">
<div class="container">
<div class="right">
<img src="../assets/logoBg.png" class="background-video" alt="" />
<!-- 设置 -->
<div class="center-align">
<div></div>
<div class="setup">
<div class="setup-item center-justify">
<div></div>
<span> 网络设置 </span>
</div>
<div class="setup-item center-justify">
<div></div>
<span> 简体中文 </span>
</div>
</div>
</div>
<div class="center-line" style="margin-top: 40px">
<!-- logo -->
<div class="logo">
<!-- <div class="center-justify" style="height: 80px; width: 300px;">
<img style="height: 100%;" src="@/assets/logotext.png">
</div> -->
</div>
</div>
<!-- From -->
<div class="from">
<div class="from-title center-justify">
<div>账号登陆</div>
</div>
<!-- From -->
<div class="from">
<div class="from-title center-justify">
<div>账号登陆</div>
</div>
<div class="from-input">
<el-form label-position="left" label-width="100px" :model="formData">
<div class="from-input-item1">
<img src="@/assets/username.png" alt="">
<el-input style="height: 25px;" v-model="formData.tenantName" placeholder="租户名称"
clearable @keyup.enter="onSubmit" />
</div>
<div class="from-input-item1">
<img src="@/assets/username.png" alt="">
<el-input style="height: 25px;" v-model="formData.userId" placeholder="账号" clearable
@keyup.enter="onSubmit" />
</div>
<div class="from-input-item1">
<img src="@/assets/password.png" alt="">
<el-input style="height: 25px; " v-model="formData.password" type="password"
placeholder="密码" show-password @keyup.enter="onSubmit" />
</div>
<div class="from-input">
<el-form label-position="left" label-width="100px" :model="formData">
<div class="from-input-item1">
<img src="@/assets/username.png" alt="" />
<el-input
style="height: 25px"
v-model="formData.tenantName"
placeholder="租户名称"
clearable
@keyup.enter="onSubmit"
/>
</div>
<div class="from-input-item1">
<img src="@/assets/username.png" alt="" />
<el-input
style="height: 25px"
v-model="formData.userId"
placeholder="账号"
clearable
@keyup.enter="onSubmit"
/>
</div>
<div class="from-input-item1">
<img src="@/assets/password.png" alt="" />
<el-input
style="height: 25px"
v-model="formData.password"
type="password"
placeholder="密码"
show-password
@keyup.enter="onSubmit"
/>
</div>
<div class="from-input-item">
<el-button class="loginButton" color="#8f7ee7" type="primary"
@click="onSubmit">登录</el-button>
</div>
</el-form>
</div>
</div>
</div>
<div class="version center-justify ">版本号：{{ version }}</div>
</div>
</div>
</div>
<div class="from-input-item">
<el-button
class="loginButton"
color="#8f7ee7"
type="primary"
@click="onSubmit"
>登录</el-button
>
</div>
</el-form>
</div>
</div>
</div>
<div class="version center-justify">版本号：{{ version }}</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { login, rentgetloginID } from '@/api/account';
import { getToken, setToken, setUser, setUserPass, getUserPass } from '@/utils/storage';
import { ElLoading } from 'element-plus';
import { usePythonBridge } from '@/utils/pythonBridge'
import { ref, reactive, onMounted } from "vue";
import { useRouter } from "vue-router";
import { login, rentgetloginID } from "@/api/account";
import { getToken, setToken, setUser, setUserPass, getUserPass } from "@/utils/storage";
import { ElLoading } from "element-plus";
import { usePythonBridge } from "@/utils/pythonBridge";
import { ElMessage } from 'element-plus';
import { tokenStore,UserStore } from '@/stores/notice'
const tokenCache = tokenStore()
const userCache = UserStore()
const { getVersion } = usePythonBridge();
let version = ref('0.0.0');
// 测试 localStorage
const testLocalStorage = () => {
try {
// 尝试设置一个测试项
localStorage.setItem('testKey', 'testValue');
// 尝试获取这个测试项
const testValue = localStorage.getItem('testKey');
if (testValue === 'testValue') {
} else {
console.error('localStorage is not working');
ElMessage.error('localStorage 被禁用');
}
} catch (error) {
console.error('localStorage is not available:', error);
ElMessage.error('localStorage 不可用');
}
};
let version = ref("0.0.0");
onMounted(() => {
setTimeout(() => {
getVersion().then((res) => {
version.value = res;
});
getpassword();
}, 500);
});
setTimeout(() => {
getVersion().then((res) => {
version.value = res;
})
// 测试localStorage;
testLocalStorage();
}, 500);
})
async function getpassword(){
const res = await getUserPass();
formData.value = {
tenantName: res == null ? "" : res.tenantName,
userId: res == null ? "" : res.userId,
password: res == null ? "" : res.password,
};
}
const router = useRouter();
const formData = ref({
tenantName: getUserPass() == null ? '' : getUserPass().tenantName,
userId: getUserPass() == null ? '' : getUserPass().userId,
password: getUserPass() == null ? '' : getUserPass().password,
});
const formData = ref({});
const onSubmit = () => {
const loading = ElLoading.service({
lock: true,
text: 'Loading',
background: 'rgba(0, 0, 0, 0.7)',
});
setUserPass(formData.value);
rentgetloginID({
name: formData.value.tenantName,
}).then((res) => {
console.log(res);
const loading = ElLoading.service({
lock: true,
text: "Loading",
background: "rgba(0, 0, 0, 0.7)",
});
setUserPass(formData.value);
rentgetloginID({
name: formData.value.tenantName,
})
.then((res) => {
console.log(res);
login({
username: formData.value.userId,
tenantId: res,
password: formData.value.password,
}).then((res) => {
loading.close();
console.log(res)
setToken(res.tokenValue);
setUser(res);
router.push('/nav');
}).catch((err) => {
loading.close();
});
}).catch((err) => {
loading.close();
console.log(err)
});
login({
username: formData.value.userId,
tenantId: res,
password: formData.value.password,
})
.then((res) => {
loading.close();
console.log(res);
setToken(res.tokenValue);
tokenCache.setToken(res.tokenValue)
userCache.setUser(res)
setUser(res);
router.push("/nav");
})
.catch((err) => {
loading.close();
});
})
.catch((err) => {
loading.close();
console.log(err);
});
};
</script>
<style lang="less">
.main {
width: 1600px;
height: 900px;
overflow: hidden;
box-sizing: border-box;
width: 1600px;
height: 900px;
overflow: hidden;
box-sizing: border-box;
/* 页面无法选中 */
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
/* 页面无法选中 */
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
.container {
display: flex;
box-sizing: border-box;
width: 1600px;
height: 900px;
.container {
display: flex;
box-sizing: border-box;
width: 1600px;
height: 900px;
.right {
box-sizing: border-box;
position: relative;
width: 1600px;
height: 900px;
padding: 20px 40px 20px 50px;
border-left: 3px solid #23516e;
position: relative;
/* 添加 position: relative */
overflow: hidden;
/* 防止内容溢出 */
.right {
box-sizing: border-box;
position: relative;
width: 1600px;
height: 900px;
padding: 20px 40px 20px 50px;
border-left: 3px solid #23516e;
position: relative;
/* 添加 position: relative */
overflow: hidden;
/* 防止内容溢出 */
.version {
color: #fff;
position: absolute;
font-size: 20px;
bottom: 20px;
left: calc(50% - 50px);
// box-sizing: border-box;
// width: 1600px;
.version {
color: #fff;
position: absolute;
font-size: 20px;
bottom: 20px;
left: calc(50% - 50px);
// box-sizing: border-box;
// width: 1600px;
}
}
.background-video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
/* 确保视频在内容之下 */
}
.setup {
display: flex;
color: #fff;
.background-video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
/* 确保视频在内容之下 */
}
.setup-item {
padding: 10px 6px;
display: flex;
.setup {
display: flex;
color: #fff;
div {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: rgb(255, 255, 255);
margin-right: 5px;
}
}
}
.setup-item {
padding: 10px 6px;
display: flex;
.logo {
padding: 20px 0;
height: 80px;
}
div {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: rgb(255, 255, 255);
margin-right: 5px;
}
}
}
.from {
width: 420px;
// height: 320px;
color: @bg-color;
background-color: #ffffff44;
border-radius: 20px;
border: 1px solid #fff;
padding: 32px;
box-sizing: border-box;
.logo {
padding: 20px 0;
height: 80px;
}
.from-title {
font-family: Source Han Sans SC;
font-weight: 500;
font-size: 24px;
color: @bg-color;
line-height: 37px;
.from {
width: 420px;
// height: 320px;
color: @bg-color;
background-color: #ffffff44;
border-radius: 20px;
border: 1px solid #fff;
padding: 32px;
box-sizing: border-box;
div {
font-size: 20px;
font-weight: 600;
// border-bottom: 4px solid #1db97d;
}
}
.from-title {
font-family: Source Han Sans SC;
font-weight: 500;
font-size: 24px;
color: @bg-color;
line-height: 37px;
.from-input {
width: 100%;
padding: 15px 0;
.from-input-item {
display: flex;
padding: 8px 0;
div {
font-size: 20px;
font-weight: 600;
// border-bottom: 4px solid #1db97d;
}
}
.from-input-item-title {
color: @bg-color;
font-size: 18px;
font-weight: 500;
width: 80px;
height: 50px;
}
.from-input {
width: 100%;
padding: 15px 0;
.loginButton {
width: 359px;
height: 50px;
background: #ffffff;
border-radius: 24px;
border: 1px solid #ffffff;
.from-input-item {
display: flex;
padding: 8px 0;
font-family: Source Han Sans SC;
font-weight: 500;
font-size: 18px;
color: @bg-color;
line-height: 37px;
}
}
.from-input-item-title {
color: @bg-color;
font-size: 18px;
font-weight: 500;
width: 80px;
height: 50px;
}
.loginButton {
width: 359px;
height: 50px;
background: #FFFFFF;
border-radius: 24px;
border: 1px solid #FFFFFF;
font-family: Source Han Sans SC;
font-weight: 500;
font-size: 18px;
color: @bg-color;
line-height: 37px;
}
}
.from-input-item1 {
display: flex;
width: 359px;
height: 50px;
background: @bg-color-light-light;
border-radius: 24px;
border: 1px solid #FFFFFF;
padding: 12px 25px 13px 25px;
box-sizing: border-box;
margin-bottom: 16px;
}
}
}
}
}
.from-input-item1 {
display: flex;
width: 359px;
height: 50px;
background: @bg-color-light-light;
border-radius: 24px;
border: 1px solid #ffffff;
padding: 12px 25px 13px 25px;
box-sizing: border-box;
margin-bottom: 16px;
}
}
}
}
}
}
.center-line {
display: flex;
flex-direction: column;
align-items: center;
display: flex;
flex-direction: column;
align-items: center;
}
.center-justify {
display: flex;
justify-content: space-around;
align-items: center;
display: flex;
justify-content: space-around;
align-items: center;
}
.center-align {
display: flex;
justify-content: space-between;
display: flex;
justify-content: space-between;
}
.center-flex {
display: flex;
justify-content: center;
align-items: center;
display: flex;
justify-content: center;
align-items: center;
}
.el-input__wrapper {
--el-input-focus-border-color: rgba(255, 255, 0, 0);
--el-menu-hover-bg-color: rgba(255, 255, 0, 0);
--el-input-focus-border-color: rgba(255, 255, 0, 0);
--el-menu-hover-bg-color: rgba(255, 255, 0, 0);
}
</style>
<style scoped lang="less">
::v-deep(.el-input__wrapper) {
background-color: rgba(255, 0, 0, 0);
box-shadow: none;
background-color: rgba(255, 0, 0, 0);
box-shadow: none;
}
::v-deep(.el-input__inner) {
color: #fff;
color: #fff;
}
::v-deep(.el-input__inner::placeholder) {
color: @bg-color;
color: @bg-color;
}
</style>
</style>

364
src/views/hosts/hostsList.vue
View File

@@ -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({