tkPage/src/views/hosts/workbenches.vue

<template>
    <div class="center-line workbenches">
        <div class="center-align" style="width: 100%; margin: 0 20px;">
            <div class="box-card-num1 center-line">
                <div>{{ $t('workbenches.totalnumber') }}: <span>{{ hostData.totalCount }}</span></div>
                <div>{{ $t('workbenches.createHost') }}: <span>{{ hostData.validAnchorsCount }}</span></div>
                <div> {{ $t('workbenches.query') }}: <span>{{ hostData.checkedDataCount }}</span></div>
                <div>{{ $t('workbenches.invite') }}: <span>{{ hostData.canInvitationCount }}</span></div>
                <div>{{ $t('workbenches.runTime') }}: <span>{{ formattedTime }}</span></div>
            </div>
            <div class="center-line" style="padding-top: 15vh;">
                <el-button class="open-login" type="primary" @click="openTK">{{ $t('workbenches.openTK') }}</el-button>
                <!-- <el-button class="open-login" type="primary" @click="startTimer">计时开始</el-button> -->
            </div>

            <div>

                <el-card class="box-card-num" 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">
                                {{ $t('workbenches.guildAccount') }}：
                            </div>
                            <el-input :disabled="!(tkData[index].code == 0 && !isLogin[index])"
                                v-model="tkData[index].account" :placeholder="$t('workbenches.guildAccountPlace')"
                                clearable />
                        </div>

                        <div class="from-input-item">
                            <div class="from-input-item-title center-justify">
                                {{ $t('workbenches.guildPass') }}：
                            </div>
                            <el-input :disabled="!(tkData[index].code == 0 && !isLogin[index])"
                                v-model="tkData[index].password" type="password"
                                :placeholder="$t('workbenches.guildPassPlace')" show-password />
                        </div>

                        <el-button class="open-login" style="margin-left: 60px;"
                            :disabled="!(tkData[index].code == 0 && !isLogin[index])" type="primary"
                            @click="loginTK(index)">{{ $t('workbenches.loginBackend') }}</el-button>
                        <div v-if="tkData[index].code == 0" class="loginState"></div>
                        <div v-if="tkData[index].code == 1" class="loginState" style="background-color: green;"></div>

                    </div>
                    <div class="todayCount"> {{ $t('workbenches.queriedNum') }}：{{ tkData[index].num }}</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">
                            {{ $t('workbenchesSetup.workbenches') }} </span>
                        <div style="margin-right: 120px;">{{ $t('workbenchesSetup.workbenches') }}:{{
                            locale == 'zh' ? countryData : countryDataEN }}
                            <!-- <el-button class="reset-button" @click="reset">重置数据</el-button> -->
                        </div>
                    </div>
                </template>
                <el-row :gutter="24">
                    <el-col :span="6">
                        <div class="input-group">
                            <label>{{ $t('workbenchesSetup.setCoinsNum') }}</label>
                            <el-input type='number' v-model="pyData.gold.min" :min="0" :max="pyData.gold.max - 1"
                                :placeholder="$t('workbenchesSetup.minCoinsNum')" style="width: 100%"
                                :disabled="!pyData.isStart">
                                <template #prepend>{{ $t('workbenchesSetup.minCoinsNum') }}</template>
                            </el-input>
                            <el-input type='number' v-model="pyData.gold.max" :min="pyData.gold.min + 1" :max="100"
                                :placeholder="$t('workbenchesSetup.maxCoinsNum')" style="width: 100%; margin-top: 10px"
                                :disabled="!pyData.isStart">
                                <template #prepend>{{ $t('workbenchesSetup.maxCoinsNum') }}</template>
                            </el-input>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="input-group">
                            <label>{{ $t('workbenchesSetup.setFansNum') }}</label>
                            <el-input type='number' v-model="pyData.fans.min" :min="0" :max="pyData.fans.max - 1"
                                :placeholder="$t('workbenchesSetup.minFansNum')" style="width: 100%"
                                :disabled="!pyData.isStart">
                                <template #prepend>{{ $t('workbenchesSetup.minFansNum') }}</template>
                            </el-input>
                            <el-input type='number' v-model="pyData.fans.max" :min="pyData.fans.min + 1" :max="100"
                                :placeholder="$t('workbenchesSetup.maxFansNum')" style="width: 100%; margin-top: 10px"
                                :disabled="!pyData.isStart">
                                <template #prepend>{{ $t('workbenchesSetup.maxFansNum') }}</template>
                            </el-input>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="input-group">
                            <label>{{ $t('workbenchesSetup.setQuery') }}</label>
                            <!-- <el-input type='number' v-model="pyData.frequency.hour" @input="handleInputHour" -->
                            <el-input type='number' v-model="pyData.frequency.hour"
                                :placeholder="$t('workbenchesSetup.hour')" style="width: 100%"
                                :disabled="!pyData.isStart">
                                <template #append>{{ $t('workbenchesSetup.hour') }}</template>
                            </el-input>
                            <!-- <el-input type='number' v-model="pyData.frequency.day" @input="handleInputDay" -->
                            <el-input type='number' v-model="pyData.frequency.day"
                                :placeholder="$t('workbenchesSetup.hour24')" style="width: 100%; margin-top: 10px"
                                :disabled="!pyData.isStart">
                                <template #append>{{ $t('workbenchesSetup.hour24') }}</template>
                            </el-input>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="input-group">
                            <label>{{ $t('workbenchesSetup.setNum') }}</label>
                            <!-- <el-input type='number' v-model="pyData.frequency.hour" @input="handleInputHour" -->
                            <div class="center-justify" style="height: 100% ;">
                                <el-input type='number' v-model="hostNum" :placeholder="$t('workbenchesSetup.num')"
                                    style="width: 100% ; margin-bottom: 70px;" :disabled="!pyData.isStart">
                                    <template #append>{{ $t('workbenchesSetup.num') }}</template>
                                </el-input>
                            </div>
                        </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">{{
                            $t('workbenchesSetup.start') }}</el-button>
                    <el-button v-show="!pyData.isStart" type="danger" @click="unsubmit">{{
                        $t('workbenchesSetup.stop') }}</el-button>

                </div>

            </el-card>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import { usePythonBridge, } from '@/utils/pythonBridge'
import { setNumData, getNumData, getUser, setTkUser, getTkUser } from '@/utils/storage'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getCountryName } from '@/utils/countryUtil'
import { tkaccountuseinfo } from '@/api/account'
import { useI18n } from 'vue-i18n'
const { locale } = useI18n()
//导入python交互方法
const { fetchDataConfig, fetchDataCount, loginBackStage, loginTikTok, backStageloginStatus, backStageloginStatusCopy } = usePythonBridge();


//ip国家
let countryData = ref('');
//英文国家
let countryDataEN = ref('');

//获取主播数量的定时器
let getHostTimer = ref(null);
//获取查询次数定时器
let getNumTimer = ref(null);
//获取的主播信息
let hostData = ref({
    totalCount: 0,
    validAnchorsCount: 0,
    canInvitationCount: 0,
    checkedDataCount: 0,
});
//是否开启tk
// let isTk = ref(true);

//账号是否登陆中
let isLogin = ref([false, false]);
//设置状态轮询定时器
let statusTimer = ref(null);
let statusTimerCopy = ref(null);

//设置次数最大值
let maxCount = ref([
    {
        hourMax: 50,
        dayMax: 300,
    },
    {
        hourMax: 100,
        dayMax: 600,
    },
]);

//tk账号信息
let tkData = ref([
    {
        account: '',
        password: '',
        index: 1,
        code: 0,
        num: 0
    },
    {
        account: '',
        password: '',
        index: 2,
        code: 0,
        num: 0
    },
]);

//python需要的数据
let pyData = ref({
    gold: { min: 0, max: 0 },
    fans: { min: 0, max: 0 },
    frequency: { hour: 0, day: 0 },
    isStart: true,
    country: countryData.value,
    test: '123',
    test1: { test: 123, test12: 123 },
    tenantId: getUser().tenantId,
    userId: getUser().userId,
});
//需要查询的主播数
let hostNum = ref(0);
//按钮提交状态
let submitting = ref(true);


onMounted(() => {
    //从缓存获取数据
    if (getNumData()) {
        pyData.value = getNumData();
    }
    if (getTkUser()) {
        tkData.value = getTkUser();
        tkData.value[0].code = 0;
        tkData.value[1].code = 0;
    }

    tkaccountuse(tkData.value[0].account, 0)
    tkaccountuse(tkData.value[1].account, 1)

    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);
        countryDataEN.value = data.country_name
        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',
        //     })
        // })
    }
};

//提交数据到py
const submit = () => {
    pyData.value.country = countryData.value;
    console.log('提交的区间值：', pyData.value);
    // if (tkData.value[0].account == '' && tkData.value[1].account == '') {
    //     ElMessage.error('请输入账号密码');
    //     return;
    // }
    // if (tkData.value[0].password == '' && tkData.value[1].password == '') {
    //     ElMessage.error('请输入账号密码');
    //     return;
    // }


    if (((Number(pyData.value.gold.min) > Number(pyData.value.gold.max)) || (Number(pyData.value.fans.min) > Number(pyData.value.fans.max)))) {
        ElMessage.error('请输入正确的区间值');
        return;
    }
    if ((Number(pyData.value.gold.max) <= 0 || Number(pyData.value.fans.max <= 0)) || pyData.value.gold.max == '' || pyData.value.fans.max == '') {
        ElMessage.error('请输入正确的区间值');
        return;
    }
    if (Number(pyData.value.frequency.hour) <= 0 || Number(pyData.value.frequency.day) <= 0 || pyData.value.frequency.hour == '' || pyData.value.frequency.day == '') {
        ElMessage.error('请输入正确的频率区间值');
        return;
    }
    if (hostNum.value <= 0) {
        ElMessage.error('请输入正确的可邀请数量');
        return;
    }

    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) => {
                //开始计时器
                startTimer();
                //开启查询次数
                getHostTimer.value = setInterval(() => {
                    fetchDataCount().then((res) => {
                        hostData.value = JSON.parse(res);
                        if (hostData.value.canInvitationCount >= hostNum.value) {
                            unsubmit();
                            alert('爬取完毕')
                        }
                    })
                }, 1000);
                getNumTimer.value = setInterval(() => {
                    tkaccountuse(tkData.value[0].account, 0)
                    tkaccountuse(tkData.value[1].account, 1)
                }, 5000);


            }).finally(() => {
                setTimeout(() => {
                    pyData.value.isStart = false;
                    submitting.value = false;
                }, 2000)

            })
        })
        .catch(() => {

        })



};

//停止
const unsubmit = () => {
    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) => {
        pauseTimer();
        pyData.value.isStart = true;
        clearInterval(getHostTimer.value);
        getHostTimer.value = null;
        clearInterval(getNumTimer.value);
        getNumTimer.value = null;

        // ElMessage.sussec('已停止')
    }).catch((err) => {
        // ElMessage.error('停止失败')
    })
};

//重置
const reset = () => {
    pyData.value.gold = { min: 0, max: 0 };
    pyData.value.fans = { min: 0, max: 0 };
    pyData.value.frequency = { hour: 0, day: 0 };
};


const loginTK = (index) => {
    setTkUser(tkData.value)
    loginBackStage({
        account: tkData.value[index].account,
        password: tkData.value[index].password,
        index: index
    })
    if (index == 0) {
        isLogin.value[1] = true;
        statusTimer = setInterval(() => {
            getloginStatus();
        }, 2000)
    } else if (index == 1) {
        isLogin.value[0] = true;
        statusTimerCopy = setInterval(() => {
            getloginStatusCopy();
        }, 2000)
    }


}

const openTK = () => {
    // isTk.value = true;
    // console.log(isTk.value)
    loginTikTok();

}

function getloginStatus() {
    backStageloginStatus().then((res) => {
        const data = JSON.parse(res);
        tkData.value[data.index].code = data.code

        if (data.code == 1) {
            clearInterval(statusTimer);
            statusTimer = null;
            submitting.value = false
            isLogin.value[1] = false;
        }
    })
}
function getloginStatusCopy() {
    backStageloginStatusCopy().then((res) => {
        const data = JSON.parse(res);
        tkData.value[data.index].code = data.code

        if (data.code == 1) {
            clearInterval(statusTimer);
            statusTimer = null;
            submitting.value = false
            isLogin.value[0] = false;
        }
    })
}


function tkaccountuse(id, index) {
    let num = 0;
    tkaccountuseinfo(id).then((res) => {
        if (res) {
            num = res
            tkData.value[index].num = num
            console.log('账号使用次数', tkData.value[index].num)
        }
    }).catch((err) => {
        console.log('账号使用次数', err)
    })

}

const isRunning = ref(false);
const totalSeconds = ref(0);
//定时器
let timerCrawl = null;

const startTimedata = ref(null);
//清空时间   并开始运行
const startTimer = () => {
    resetTimer();
    if (isRunning.value) return;
    isRunning.value = true;
    startTimedata.value = Date.now();
    timerCrawl = setInterval(() => {
        totalSeconds.value = Math.floor((Date.now() - startTimedata.value) / 1000);
    }, 1000);
};

//结束运行 暂停
const pauseTimer = () => {
    isRunning.value = false;
    clearInterval(timerCrawl);
};
//清空时间
const resetTimer = () => {
    isRunning.value = false;
    clearInterval(timerCrawl);
    totalSeconds.value = 0;
};
// 格式化时间为 HH:MM:SS
const formattedTime = computed(() => {
    const hours = Math.floor(totalSeconds.value / 3600);
    const minutes = Math.floor((totalSeconds.value % 3600) / 60);
    const seconds = totalSeconds.value % 60;

    return [
        hours.toString().padStart(2, '0'),
        minutes.toString().padStart(2, '0'),
        seconds.toString().padStart(2, '0')
    ].join(':');
});


function handleInputHour(value) {
    console.log(value)
    // 替换非数字字符为空字符串
    let num = value.replace(/[^\d]/g, '');
    // 如果值小于等于0，则设置为0
    if (Number(num) <= 0) {
        num = 0;
    }

    if ((tkData.value[0].code == 1) && (tkData.value[1].code == 1)) {
        if (Number(num) > maxCount.value[1].hourMax) {
            num = maxCount.value[1].hourMax;
        }
    } else if ((tkData.value[0].code == 1) || (tkData.value[1].code == 1)) {
        // 如果值大于最大值，则设置为最大值
        if (Number(num) > maxCount.value[0].hourMax) {
            num = maxCount.value[0].hourMax;
        }

    } else {
        ElMessage.error('请先登录tk后台');
        num = 0;
    }
    // 更新模型
    pyData.value.frequency.hour = num;
}

function handleInputDay(value) {
    console.log(value)
    // 替换非数字字符为空字符串
    let num = value.replace(/[^\d]/g, '');
    // 如果值小于等于0，则设置为0
    if (Number(num) <= 0) {
        num = 0;
    }

    if ((tkData.value[0].code == 1) && (tkData.value[1].code == 1)) {
        if (Number(num) > maxCount.value[1].dayMax) {
            num = maxCount.value[1].dayMax;
        }
    } else if ((tkData.value[0].code == 1) || (tkData.value[1].code == 1)) {
        // 如果值大于最大值，则设置为最大值
        if (Number(num) > maxCount.value[0].dayMax) {
            num = maxCount.value[0].dayMax;
        }
    } else {
        ElMessage.error('请先登录tk后台');
        num = 0;
    }


    // 更新模型
    pyData.value.frequency.day = num;
}
</script>

<style scoped lang="less">
.container {
    margin: 0 auto;
}

.workbenches {
    padding: 45px 29px 22px 27px;

    /* 页面无法选中 */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;


}

.box-card {
    // 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;

    padding-top: 18px;
    box-sizing: border-box;

    .todayCount {
        padding: 15px 21px;
        font-size: 14px;
    }
}

.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: #b90000;
    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;
    height: 100%;

    .el-input {
        margin: 22px 0;
    }
}

label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: #606266;
}

.open-login {
    width: 100px;
    height: 47px;
    background: @btn-bg-color;
    border-radius: 10px;
    border: none;
}

.reset-button {
    width: 132px;
    height: 47px;
    background: @btn-bg-color;
    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: @bg-color;
    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 lang="less">
::v-deep(.el-input-group__prepend) {
    background: @bg-color-light;
    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: @bg-color-light;
    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;
    height: 44px;
}

.el-input {
    width: 200px;
    height: 48px;
    background: #FFFFFF;
    border-radius: 10px;
    border: 1px solid #B7CEC5;
}
</style>