pxl/tk-mini-program-PC
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui设计

Browse Source
This commit is contained in:
没复习
2025-04-09 21:07:15 +08:00
parent 758fdb49c2
commit b71c2bd071
24 changed files with 1144 additions and 218 deletions
Download Patch File Download Diff File Expand all files Collapse all files

529
src/views/hosts/workbenches.vue
View File

@@ -1,98 +1,270 @@
<template>
<div class="container">
<el-card class="box-card">
<template #header>
<div class="card-header">
<span>工作台 </span>
</div>
</template>
<el-row :gutter="20">
<el-col :span="8">
<div class="input-group">
<label>设置金币数量</label>
<el-input type='number' v-model="pyData.gold.min" :min="0" :max="pyData.gold.max - 1"
placeholder="最小值" style="width: 100%">
<template #prepend>最小金币数</template>
</el-input>
<el-input type='number' v-model="pyData.gold.max" :min="pyData.gold.min + 1" :max="100"
placeholder="最大值" style="width: 100%; margin-top: 10px"> <template #prepend>最大金币数</template>
</el-input>
</div>
</el-col>
<el-col :span="8">
<div class="input-group">
<label>设置粉丝数量</label>
<el-input type='number' v-model="pyData.fans.min" :min="0" :max="pyData.fans.max - 1"
placeholder="最小值" style="width: 100%">
<template #prepend>最小粉丝数</template>
</el-input>
<el-input type='number' v-model="pyData.fans.max" :min="pyData.fans.min + 1" :max="100"
placeholder="最大值" style="width: 100%; margin-top: 10px">
<template #prepend>最大粉丝数</template>
</el-input>
</div>
</el-col>
<el-col :span="8">
<div class="input-group">
<label>后台查询频率</label>
<el-input type='number' v-model="pyData.frequency.min" :min="0" :max="pyData.frequency.max - 1"
placeholder="次/小时" style="width: 100%">
<template #append>次/小时</template>
</el-input>
<el-input type='number' v-model="pyData.frequency.max" :min="pyData.frequency.min + 1"
:max="100" placeholder="次/24小时" style="width: 100%; margin-top: 10px">
<template #append>次/24小时</template>
</el-input>
</div>
</el-col>
</el-row>
<div style="margin-top: 20px; text-align: center">
<el-button v-show="pyData.isStart" type="primary" @click="submit">开始获取数据</el-button>
<el-button v-show="!pyData.isStart" type="danger" @click="unsubmit">停止获取</el-button>
<el-button @click="reset">重置数据</el-button>
<div class="center-line workbenches">
<div class="center-align" style="width: 100%; margin: 0 20px;">
<div class="box-card-num1 center-line">
<div>总数量: <span>{{ hostData.totalCount }}</span></div>
<div>有效主播: <span>{{ hostData.validAnchorsCount }}</span></div>
<div> 已查询: <span>{{ hostData.checkedDataCount }}</span></div>
<div>可邀请: <span>{{ hostData.canInvitationCount }}</span></div>
</div>
</el-card>
<div class="center-line" style="padding-top: 15vh;">
<el-button class="open-login" type="primary" @click="openTK">开启tk</el-button>
</div>
<div>
<el-card class="box-card-num center-justify" v-for="(item, index) in 2" :key="index">
<div class="center-justify">
<div class="from-input-item">
<div class="from-input-item-title center-justify">
公会账号：
</div>
<el-input :disabled="!(isTk || tkData[index].code == 1)" v-model="tkData[index].account"
style="height: 50px;" placeholder="请输入登录账号" clearable />
</div>
<div class="from-input-item">
<div class="from-input-item-title center-justify">
公会密码：
</div>
<el-input :disabled="!(isTk || tkData[index].code == 1)" v-model="tkData[index].password"
style="height: 50px;" type="password" placeholder="请输入登录密码" show-password />
</div>
<el-button class="open-login" style="margin-left: 60px;"
:disabled="!(isTk || tkData[index].code == 1)" type="primary"
@click="loginTK(index)">登录tk</el-button>
<div v-if="tkData[index].code == 0" class="loginState" style="background-color: red;"></div>
<div v-else class="loginState" style="background-color: green;"></div>
</div>
</el-card>
</div>
</div>
<div class="container ">
<el-card class="box-card">
<template #header>
<div class="card-header">
<span class="center-justify"><img src="@/assets/worklogo.png">工作台 </span>
<div>当前网络:{{ countryData }}
<!-- <el-button class="reset-button" @click="reset">重置数据</el-button> -->
</div>
</div>
</template>
<el-row :gutter="20">
<el-col :span="8">
<div class="input-group">
<label>设置金币数量</label>
<el-input type='number' v-model="pyData.gold.min" :min="0" :max="pyData.gold.max - 1"
placeholder="最小值" style="width: 100%" :disabled="!pyData.isStart">
<template #prepend>最小金币数</template>
</el-input>
<el-input type='number' v-model="pyData.gold.max" :min="pyData.gold.min + 1" :max="100"
placeholder="最大值" style="width: 100%; margin-top: 10px" :disabled="!pyData.isStart">
<template #prepend>最大金币数</template>
</el-input>
</div>
</el-col>
<el-col :span="8">
<div class="input-group">
<label>设置粉丝数量</label>
<el-input type='number' v-model="pyData.fans.min" :min="0" :max="pyData.fans.max - 1"
placeholder="最小值" style="width: 100%" :disabled="!pyData.isStart">
<template #prepend>最小粉丝数</template>
</el-input>
<el-input type='number' v-model="pyData.fans.max" :min="pyData.fans.min + 1" :max="100"
placeholder="最大值" style="width: 100%; margin-top: 10px" :disabled="!pyData.isStart">
<template #prepend>最大粉丝数</template>
</el-input>
</div>
</el-col>
<el-col :span="8">
<div class="input-group">
<label>后台查询频率</label>
<el-input type='number' v-model="pyData.frequency.hour" :min="0"
:max="pyData.frequency.day - 1" placeholder="次/小时" style="width: 100%"
:disabled="!pyData.isStart">
<template #append>次/小时</template>
</el-input>
<el-input type='number' v-model="pyData.frequency.day" :min="pyData.frequency.hour + 1"
:max="100" placeholder="次/24小时" style="width: 100%; margin-top: 10px"
:disabled="!pyData.isStart">
<template #append>次/24小时</template>
</el-input>
</div>
</el-col>
</el-row>
<div style="margin-top: 20px; text-align: center">
<el-button class="submit-button" :disabled="submitting" v-show="pyData.isStart" type="primary"
@click="submit">开始获取数据</el-button>
<el-button v-show="!pyData.isStart" type="danger" @click="unsubmit">停止获取</el-button>
</div>
</el-card>
</div>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { usePythonBridge } from '@/utils/pythonBridge'
import { setNumData, getNumData } from '@/utils/storage'
import { ElMessage } from 'element-plus'
// import { useIPCountry } from '@/utils/useIPCountry';
import { usePythonBridge, } from '@/utils/pythonBridge'
import { setNumData, getNumData, getUser } from '@/utils/storage'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getCountryName } from '@/utils/countryUtil'
//导入python交互方法
const { fetchDataConfig, fetchDataCount, loginBackStage, loginTikTok } = usePythonBridge();
const { fetchDataConfig } = usePythonBridge();
//ip国家
let countryData = ref('');
//获取主播数量的定时器
let getHostTimer = ref(null);
//获取的主播信息
let hostData = ref({
totalCount: 0,
validAnchorsCount: 0,
canInvitationCount: 0,
checkedDataCount: 0,
});
//是否开启tk
let isTk = ref(false);
//tk账号信息
let tkData = ref([
{
account: '',
password: '',
index: 1,
code: 0,
},
{
account: '',
password: '',
index: 2,
code: 0,
},
]);
//python需要的数据
let pyData = ref({
gold: { min: 0, max: 0 },
fans: { min: 0, max: 0 },
frequency: { min: 0, max: 0 },
frequency: { hour: 0, day: 0 },
isStart: true,
country: 'CN'
country: countryData.value,
test: '123',
test1: { test: 123, test12: 123 },
tenantId: getUser().tenantId,
userId: getUser().userId,
});
//按钮提交状态
let submitting = ref(false);
onMounted(() => {
//从缓存获取数据
if (getNumData()) {
pyData.value = getNumData();
}
getIpInfo()
})
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);
}
};
//提交数据到py
const submit = () => {
// console.log('提交的区间值：', pyData.value.gold, pyData.value.fans, pyData.value.frequency);
pyData.value.country = countryData.value;
console.log('提交的区间值：', pyData.value);
ElMessageBox.confirm(
'确认开始爬取数据?',
'开始',
{
confirmButtonText: '开始',
cancelButtonText: '取消',
type: 'success',
}
)
.then(() => {
// console.log('提交的区间值：', pyData.value.gold, pyData.value.fans, pyData.value.frequency);
//开始按钮的状态 改为禁用
submitting.value = true;
setNumData(pyData.value);
console.error('提交的区间值：', JSON.stringify(pyData.value));
fetchDataConfig(JSON.stringify({
gold: pyData.value.gold,
fans: pyData.value.fans,
frequency: pyData.value.frequency,
isStart: true,
country: countryData.value,
tenantId: getUser().tenantId,
userId: getUser().userId,
})).then((res) => {
getHostTimer.value = setInterval(() => {
fetchDataCount().then((res) => {
hostData.value = JSON.parse(res);
})
}, 1000);
}).finally(() => {
setTimeout(() => {
pyData.value.isStart = false;
submitting.value = false;
}, 2000)
})
})
.catch(() => {
})
setNumData(pyData.value);
fetchDataConfig(JSON.stringify(pyData.value)).then((res) => {
ElMessage.sussec('提交成功')
pyData.value.isStart = false;
}).catch((err) => {
ElMessage.error('提交失败')
})
};
//停止
const unsubmit = () => {
fetchDataConfig(JSON.stringify(pyData.value)).then((res) => {
fetchDataConfig(JSON.stringify({
gold: pyData.value.gold,
fans: pyData.value.fans,
frequency: pyData.value.frequency,
isStart: false,
country: countryData.value,
tenantId: getUser().tenantId,
userId: getUser().userId,
})).then((res) => {
pyData.value.isStart = true;
alert('已停止' + res);
clearInterval(getHostTimer.value);
getHostTimer.value = null;
// ElMessage.sussec('已停止')
}).catch((err) => {
alert('停止失败', err);
// ElMessage.error('停止失败')
})
};
@@ -100,37 +272,144 @@ const unsubmit = () => {
const reset = () => {
pyData.value.gold = { min: 0, max: 0 };
pyData.value.fans = { min: 0, max: 0 };
pyData.value.frequency = { min: 0, max: 0 };
pyData.value.frequency = { hour: 0, day: 0 };
};
onMounted(() => {
console.log(getNumData())
if (getNumData()) {
pyData.value = getNumData();
}
const loginTK = (index) => {
loginBackStage(JSON.stringify({
account: tkData.value[index].account,
password: tkData.value[index].password,
index: index
})).then((res) => {
// let data = JSON.parse(res);
// if (data.code == 1) {
// tkData.value[data.index].code = 1;
// }
}).catch((err) => {
})
})
}
const openTK = () => {
isTk.value = true;
console.log(isTk.value)
loginTikTok();
}
function jszhuru() {
isTk.value = true;
tkData[index].code = 1;
}
</script>
<style scoped>
<style scoped lang="less">
.container {
margin: 0 auto;
padding: 20px;
}
.workbenches {
padding: 45px 29px 22px 27px
}
.box-card {
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
// width: 1240px;
height: 436px;
background: #FFFFFF;
box-shadow: 0px 0px 21px 0px rgba(183, 183, 183, 0.33);
border-radius: 24px;
}
.box-card-num1 {
width: 197px;
height: 321px;
background: #FFFFFF;
box-shadow: 0px 0px 21px 0px rgba(183, 183, 183, 0.33);
border-radius: 24px;
padding-top: 60px;
box-sizing: border-box;
div {
height: 20%;
display: flex;
justify-content: space-around;
align-items: center;
color: #8D8E8E;
span {
color: #000;
padding-left: 10px;
}
}
}
.box-card-num {
width: 897px;
height: 145px;
background: #FFFFFF;
box-shadow: 0px 0px 21px 0px rgba(183, 183, 183, 0.33);
border-radius: 24px;
margin-bottom: 30px;
}
.from-input-item {
display: flex;
.from-input-item-title {
color: #000000;
font-size: 14px;
font-weight: 500;
width: 100px;
height: 50px;
}
.loginButton {
width: 100%;
height: 40px;
color: #ffffff;
font-size: 16px;
}
}
.loginState {
width: 15px;
height: 15px;
border-radius: 50%;
background-color: red;
margin-left: 15px;
}
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
span {
font-family: Source Han Sans SC;
font-weight: 400;
font-size: 20px;
color: #2D2727;
line-height: 37px;
img {
margin-right: 16px;
}
}
}
.input-group {
margin-bottom: 20px;
.el-input {
margin: 22px 0;
}
}
label {
@@ -139,4 +418,94 @@ label {
font-weight: bold;
color: #606266;
}
.open-login {
width: 100px;
height: 47px;
background: #E7CA92;
border-radius: 10px;
}
.reset-button {
width: 132px;
height: 47px;
background: #E7CA92;
border-radius: 10px;
font-family: Source Han Sans SC;
font-weight: 400;
font-size: 18px;
color: #FFFFFF;
margin-left: 50px;
}
.submit-button {
width: 160px;
height: 47px;
background: #338F6A;
border-radius: 10px;
}
.center-line {
display: flex;
flex-direction: column;
align-items: center;
// justify-content: center;
}
.center-justify {
display: flex;
justify-content: space-around;
align-items: center;
}
.center-align {
display: flex;
justify-content: space-between;
}
.center-flex {
display: flex;
justify-content: center;
align-items: center;
}
</style>
<style scoped>
::v-deep(.el-input-group__prepend) {
background: #84CEB2;
border-radius: 10px 0px 0px 10px;
border: 1px solid #B7CEC5;
font-family: Source Han Sans SC;
font-weight: 400;
font-size: 18px;
color: #FFFFFF;
line-height: 37px;
}
::v-deep(.el-input-group__append) {
background: #84CEB2;
border-radius: 0px 10px 10px 0px;
border: 1px solid #B7CEC5;
font-family: Source Han Sans SC;
font-weight: 400;
font-size: 18px;
color: #FFFFFF;
line-height: 37px;
}
::v-deep(.el-input__wrapper) {
width: 218px;
}
.el-input {
width: 200px;
height: 48px;
background: #FFFFFF;
border-radius: 10px;
border: 1px solid #B7CEC5;
}
</style>