初始化仓库
This commit is contained in:
366
src/views/HomeView.vue
Normal file
366
src/views/HomeView.vue
Normal file
@@ -0,0 +1,366 @@
|
||||
<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>
|
||||
<el-dropdown>
|
||||
<span class="el-dropdown-link">
|
||||
<span style="font-size:20px; color: #fff;">
|
||||
{{ $t('login.network') }}
|
||||
</span>
|
||||
</span>
|
||||
|
||||
</el-dropdown>
|
||||
</div>
|
||||
<div class="setup-item center-justify">
|
||||
<div></div>
|
||||
<el-dropdown>
|
||||
<span class="el-dropdown-link">
|
||||
<span style="font-size:20px; color: #fff;">
|
||||
{{ $t('login.Language') }}
|
||||
</span>
|
||||
<!-- <el-icon class="el-icon--right">
|
||||
<arrow-down />
|
||||
</el-icon> -->
|
||||
</span>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item @click="switchLanguage('zh')">
|
||||
中文
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item @click="switchLanguage('en')">
|
||||
English
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
<!-- <el-radio-group v-model="localeData" size="large">
|
||||
<el-radio-button @click="switchLanguage('zh')" label="中文" />
|
||||
<el-radio-button @click="switchLanguage('en')" label="English" />
|
||||
</el-radio-group> -->
|
||||
|
||||
</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="margin-right: 20px;height: 100%;" src="@/assets/logo.png"> -->
|
||||
<img style="height: 100%;" src="@/assets/logotext.png">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- From -->
|
||||
<div class="from">
|
||||
<div class="from-title center-justify">
|
||||
<div>{{ $t('login.title') }}</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="$t('login.tenantName')" 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="$t('login.account')" 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="$t('login.password')" show-password @keyup.enter="onSubmit" />
|
||||
</div>
|
||||
|
||||
<div class="from-input-item">
|
||||
<el-button class="loginButton" color="#8f7ee7" type="primary" @click="onSubmit">{{
|
||||
$t('login.login') }}</el-button>
|
||||
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="version center-justify ">{{ $t('login.version') }}：{{ version }}</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { login, getIdByName } from '@/api/account';
|
||||
import { getToken, setToken, setUser, setUserPass, getUserPass } from '@/utils/storage';
|
||||
import { ElLoading } from 'element-plus';
|
||||
import { usePythonBridge } from '@/utils/pythonBridge'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
|
||||
const { locale } = useI18n()
|
||||
let localeData = ref(locale.value == 'zh' ? '中文' : 'English')
|
||||
function switchLanguage(lang) {
|
||||
console.log(localeData.value)
|
||||
locale.value = lang
|
||||
localStorage.setItem('lang', lang)
|
||||
}
|
||||
|
||||
const { getVersion, stopScript } = usePythonBridge();
|
||||
let version = ref('0.0.0');
|
||||
onMounted(() => {
|
||||
|
||||
stopScript();
|
||||
setTimeout(() => {
|
||||
getVersion().then((res) => {
|
||||
version.value = res;
|
||||
})
|
||||
}, 500);
|
||||
|
||||
|
||||
})
|
||||
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const formData = ref({
|
||||
tenantName: getUserPass() == null ? '' : getUserPass().tenantName,
|
||||
userId: getUserPass() == null ? '' : getUserPass().userId,
|
||||
password: getUserPass() == null ? '' : getUserPass().password,
|
||||
});
|
||||
|
||||
|
||||
|
||||
const onSubmit = () => {
|
||||
const loading = ElLoading.service({
|
||||
lock: true,
|
||||
text: 'Loading',
|
||||
background: 'rgba(0, 0, 0, 0.7)',
|
||||
});
|
||||
setUserPass(formData.value);
|
||||
getIdByName(formData.value.tenantName).then((tenantId) => {
|
||||
console.log(tenantId)
|
||||
login({
|
||||
tenantId: Number(tenantId),
|
||||
username: formData.value.userId,
|
||||
password: formData.value.password,
|
||||
}).then((res) => {
|
||||
loading.close();
|
||||
console.log(res)
|
||||
setToken(res.tokenValue);
|
||||
setUser(res);
|
||||
router.push('/nav');
|
||||
}).catch((err) => {
|
||||
loading.close();
|
||||
});
|
||||
})
|
||||
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.main {
|
||||
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;
|
||||
|
||||
.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;
|
||||
/* 防止内容溢出 */
|
||||
|
||||
.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;
|
||||
|
||||
.setup-item {
|
||||
padding: 10px 6px;
|
||||
display: flex;
|
||||
|
||||
&>div:nth-child(1) {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
background-color: rgb(255, 255, 255);
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.logo {
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.from {
|
||||
width: 420px;
|
||||
// height: 320px;
|
||||
color: @bg-color;
|
||||
background-color: #ffffff44;
|
||||
border-radius: 20px;
|
||||
border: 1px solid #fff;
|
||||
padding: 32px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.from-title {
|
||||
font-family: Source Han Sans SC;
|
||||
font-weight: 500;
|
||||
font-size: 24px;
|
||||
color: @bg-color;
|
||||
line-height: 37px;
|
||||
|
||||
|
||||
div {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
// border-bottom: 4px solid #1db97d;
|
||||
}
|
||||
}
|
||||
|
||||
.from-input {
|
||||
width: 100%;
|
||||
padding: 15px 0;
|
||||
|
||||
.from-input-item {
|
||||
display: flex;
|
||||
padding: 8px 0;
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.center-line {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: 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;
|
||||
}
|
||||
|
||||
.el-input__wrapper {
|
||||
--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;
|
||||
|
||||
}
|
||||
|
||||
::v-deep(.el-input__inner) {
|
||||
color: #fff;
|
||||
|
||||
}
|
||||
|
||||
::v-deep(.el-input__inner::placeholder) {
|
||||
color: @bg-color;
|
||||
}
|
||||
</style>
|
||||
595
src/views/hosts/hostsList.vue
Normal file
595
src/views/hosts/hostsList.vue
Normal file
@@ -0,0 +1,595 @@
|
||||
<template>
|
||||
<div class="hostList">
|
||||
<div>
|
||||
<div style="display: flex;">
|
||||
<el-select v-model="searchForm.country" filterable :placeholder="$t('hostList.placeCountry')" size="large"
|
||||
style="width: 160px">
|
||||
<el-option :label="$t('hostList.selectAll')" :value="''" />
|
||||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
|
||||
<div></div>
|
||||
<el-date-picker v-model="searchForm.createTime" type="date" value-format="YYYY-MM-DD"
|
||||
:placeholder="$t('hostList.placeSeletTime')" size="large" style="margin-left: 50px;width: 160px;" />
|
||||
|
||||
<el-input v-model="searchForm.hostsId" :placeholder="$t('hostList.placeHostId')" size="large"
|
||||
style="width: 160px; margin-left: 50px;" clearable />
|
||||
|
||||
<el-button class="serch-button" style="margin-left: 50px;" type="primary" @click="serch">{{
|
||||
$t('hostList.query') }}</el-button>
|
||||
<el-button class="put-button" :disabled="tableData.length == 0" type="primary" @click="exportList">{{
|
||||
$t('hostList.export') }}</el-button>
|
||||
<!-- <el-button class="put-button" type="primary" @click="dialogFormVisible = true">分配给指定员工</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>
|
||||
|
||||
<div class="hostTable center-justify">
|
||||
<el-table ref="multipleTableRef" :data="tableData" stripe v-loading="loading" height="500"
|
||||
@selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="35" />
|
||||
|
||||
<el-table-column fixed prop="hostId" :label="$t('hostList.hostId')" width="160">
|
||||
<template #default="scope">
|
||||
<div class="hostIdText" @click="openHTML(scope.row.hostId)"> {{
|
||||
scope.row.hostId }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
|
||||
<el-table-column prop="hostlevel" :label="$t('hostList.grade')" width="80">
|
||||
<template #default="scope">
|
||||
{{ scope.row.hostlevel }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="invitationType" :label="$t('hostList.invitationType')" width="80">
|
||||
<template #default="scope">
|
||||
|
||||
<el-tag :type="scope.row.invitationType == 1 ? 'success' : 'warning'">
|
||||
{{ scope.row.invitationType == 1 ? $t('hostList.invitationType1') : $t('hostList.invitationType2') }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column v-for="label in labelList" :key="label.paramCode" :prop="label.paramCode"
|
||||
:label="label.paramCodeMeaning" width="120">
|
||||
<template v-if="label.paramCode != 'createDt'" #default="scope">
|
||||
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
|
||||
<!-- <el-table-column label="操作">
|
||||
<template #default="scope">
|
||||
<div style="display: flex; align-items: center">
|
||||
<el-button type="primary" @click="getTkhostdetail(scope.row.hostId)">查看</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column> -->
|
||||
</el-table>
|
||||
|
||||
</div>
|
||||
<!-- 分页 -->
|
||||
<div class="center-justify" style="margin-top: 30px;">
|
||||
<el-pagination v-model:current-page="page" v-model:page-size="pageSize" background
|
||||
layout="sizes, prev, pager, next" :total="total" :page-sizes="[10, 20, 50, 100]"
|
||||
@size-change="handleSizeChange" @current-change="handleCurrentChange" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<el-dialog v-model="filterdialogVisible" width="800px" :before-close="handleClose">
|
||||
<el-row v-for="(field, index) in fields" :key="index" :gutter="20" style="margin-bottom: 10px">
|
||||
<el-col :span="4">
|
||||
<div style="height: 100%; padding-top: 10px" class="center-justify">
|
||||
{{ field.label }}
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="10">
|
||||
<div><label>{{ $t('hostList.min') }}</label></div>
|
||||
<el-input type="number" :oninput="'if(value.length>9)value=value.slice(0,9)'"
|
||||
v-model.number="searchForm[field.minModel]" :placeholder="$t('hostList.placeMin')" />
|
||||
</el-col>
|
||||
<el-col :span="10">
|
||||
<div><label>{{ $t('hostList.max') }}</label></div>
|
||||
<el-input type="number" :oninput="'if(value.length>9)value=value.slice(0,9)'"
|
||||
v-model.number="searchForm[field.maxModel]" :placeholder="$t('hostList.placeMax')" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="4">
|
||||
<!-- <label>选择筛选条件</label> -->
|
||||
<div style="height: 100%;padding-top: 10px;" class="center-justify">
|
||||
{{ $t('hostList.sort') }}
|
||||
</div>
|
||||
|
||||
</el-col>
|
||||
<el-col :span="10">
|
||||
<div><label>{{ $t('hostList.sortType') }}</label></div>
|
||||
|
||||
|
||||
<el-select v-model="sortData.sortType" 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>{{ $t('hostList.ascending') }}/{{ $t('hostList.descending') }}</label></div>
|
||||
|
||||
<el-select v-model="sortData.sortForm" filterable placeholder="请选择" style="width: 240px">
|
||||
<el-option
|
||||
v-for="item in [{ label: $t('hostList.ascending'), value: 'asc' }, { label: $t('hostList.descending'), 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">
|
||||
{{ $t('hostList.reset') }}
|
||||
</el-button>
|
||||
<!-- <el-button @click="filterdialogVisible = false">取消</el-button> -->
|
||||
<el-button type="primary" @click="handelClick">
|
||||
{{ $t('hostList.sure') }}
|
||||
</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// import { getToken, setToken, removeToken } from '@/utils/storage'
|
||||
import { tkhostdata, dicts, tkhostdetail, downList, getStaffList, managerhosts, upholdinfo, getCountryinfo, accountName } from '@/api/account';
|
||||
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 { useI18n } from 'vue-i18n'
|
||||
|
||||
const { t } = useI18n()
|
||||
const loading = ref(false)
|
||||
//py方法
|
||||
const { givePyAnchorId, exportToExcel } = usePythonBridge();
|
||||
|
||||
let num = ref(0)
|
||||
//账号信息
|
||||
const userInfo = ref(getUser())
|
||||
//主播列表DOM
|
||||
const multipleTableRef = ref(null)
|
||||
|
||||
let labelList = ref([
|
||||
{ paramCode: 'country', paramCodeMeaning: t('hostList.country') },
|
||||
{ paramCode: 'createTime', paramCodeMeaning: t('hostList.creationTime') },
|
||||
{ paramCode: 'hostsCoins', paramCodeMeaning: t('hostList.anchorcoins') },
|
||||
{ paramCode: 'yesterdayCoins', paramCodeMeaning: t('hostList.yesterdayGoldCoins') },
|
||||
{ paramCode: 'fans', paramCodeMeaning: t('hostList.fansNum') },
|
||||
{ paramCode: 'fllowernum', paramCodeMeaning: t('hostList.followersNum') },
|
||||
{ paramCode: 'onlineFans', paramCodeMeaning: t('hostList.onlineFans') },
|
||||
{ paramCode: 'hostsKind', paramCodeMeaning: t('hostList.anchorType') },
|
||||
// { paramCode: 'invitationType', paramCodeMeaning: t('hostList.invitationType') },
|
||||
|
||||
]);
|
||||
const tableData = ref([])
|
||||
//主播列表传参
|
||||
const searchForm = ref({})
|
||||
const fields = [
|
||||
{ label: t('hostList.fansNum'), minModel: 'fansMin', maxModel: 'fansMax' },
|
||||
{ label: t('hostList.onlineFans'), minModel: 'onlineFansMin', maxModel: 'onlineFansMax' },
|
||||
{ label: t('hostList.anchorcoins'), minModel: 'hostsCoinsMin', maxModel: 'hostsCoinsMax' },
|
||||
{ label: t('hostList.followersNum'), minModel: 'fllowernumMin', maxModel: 'fllowernumMax' },
|
||||
]
|
||||
//排序
|
||||
let sortData = ref({ sortForm: 'desc', sortType: "createTime" })
|
||||
|
||||
//排序类型
|
||||
let sortNameOptions = ref([
|
||||
{ label: t('hostList.creationTime'), type: 'createTime' },
|
||||
{ label: t('hostList.anchorcoins'), type: 'hostsCoins' },
|
||||
{ label: t('hostList.fansNum'), type: 'fans' },
|
||||
{ label: t('hostList.yesterdayGoldCoins'), type: 'yesterdayCoins' },
|
||||
{ label: t('hostList.onlineFans'), type: 'onlineFans' },
|
||||
{ label: t('hostList.followersNum'), type: 'fllowernum' },
|
||||
|
||||
])
|
||||
//员工选择列表
|
||||
let staffOptions = ref([])
|
||||
//筛选条件选择列表
|
||||
|
||||
//选择的员工
|
||||
let staffValue = ref('')
|
||||
//选择的主播列表
|
||||
let selectHostList = ref([])
|
||||
//分配弹窗是否弹出
|
||||
let dialogFormVisible = ref(false)
|
||||
//分配情况弹窗是否弹出
|
||||
let hostNameVisible = ref(false)
|
||||
|
||||
//备注弹窗是否弹出
|
||||
let commentVisible = ref(false)
|
||||
//筛选弹窗是否弹出
|
||||
let filterdialogVisible = ref(false)
|
||||
//分配的员工
|
||||
let staffId = ref({})
|
||||
//备注信息
|
||||
let commentInfo = ref('')
|
||||
//备注信息主播
|
||||
let commentHost = ref('')
|
||||
//分页
|
||||
let pageSize = ref(10)
|
||||
let page = ref(1)
|
||||
let total = ref(0)
|
||||
//是否渲染
|
||||
const isPopoverVisible = reactive({})
|
||||
|
||||
|
||||
let options = ref([])
|
||||
|
||||
let version = ref('0.0.0');
|
||||
|
||||
onMounted(() => {
|
||||
|
||||
|
||||
|
||||
getCountry(); //获取国家
|
||||
|
||||
// getSerchStorage();//获取搜索条件
|
||||
|
||||
getlist();//获取主播列表
|
||||
})
|
||||
|
||||
function serch() {
|
||||
page.value = 1
|
||||
console.log(t('hostList.yesterdayGoldCoins'))
|
||||
getlist();
|
||||
}
|
||||
|
||||
function exportList() {
|
||||
if (searchForm.value.dataType == 'InvitationType') {
|
||||
searchForm.value.dataEnd = searchForm.value.dataStart
|
||||
}
|
||||
exportToExcel({})
|
||||
|
||||
|
||||
// //浏览器导出方法
|
||||
// downList('export/hostsinfo',
|
||||
// {
|
||||
// searchTime: searchForm.value.time,
|
||||
// region: searchForm.value.country,
|
||||
// pageSize: pageSize.value,
|
||||
// page: page.value,
|
||||
// userId: userInfo.value.userId,
|
||||
// }
|
||||
// );
|
||||
|
||||
}
|
||||
//分页每页条数
|
||||
function handleSizeChange(val) {
|
||||
console.log(`${val} items per page`)
|
||||
getlist();
|
||||
|
||||
}
|
||||
//分页页数
|
||||
function handleCurrentChange(val) {
|
||||
console.log(`current page: ${val}`)
|
||||
getlist();
|
||||
|
||||
}
|
||||
//选择行
|
||||
function handleSelectionChange(data) {
|
||||
console.log(data)
|
||||
selectHostList.value = []
|
||||
data.forEach(item => {
|
||||
selectHostList.value.push(item.hostId)
|
||||
})
|
||||
// multipleTableRef.value = data
|
||||
// console.log(multipleTableRef.value)
|
||||
|
||||
}
|
||||
//获取主播列表
|
||||
const getlist = () => {
|
||||
|
||||
|
||||
loading.value = true
|
||||
console.log(searchForm.value)
|
||||
tkhostdata({
|
||||
tenantId: Number(userInfo.value.tenantId),
|
||||
sort: sortData.value.sortForm,//正序倒序
|
||||
sortName: sortData.value.sortType,//排序类型
|
||||
"current": page.value,
|
||||
"pageSize": pageSize.value,
|
||||
...searchForm.value,//筛选条件
|
||||
}).then(res => {
|
||||
loading.value = false
|
||||
if (res) {
|
||||
console.log('主播列表', res)
|
||||
total.value = Number(res.total)
|
||||
tableData.value = res.records.map(item => ({
|
||||
hostId: item.hostsId, // 注意：原字段是 hostId，你的数据是 hostsId，需手动映射
|
||||
hostlevel: item.hostsLevel, // 原字段 hostlevel 对应你的数据 hostsLevel
|
||||
country: item.country,
|
||||
createTime: item.createTime,
|
||||
fans: item.fans,
|
||||
fllowernum: item.fllowernum,
|
||||
hostsCoins: item.hostsCoins,
|
||||
hostsKind: item.hostsKind,
|
||||
onlineFans: item.onlineFans,
|
||||
yesterdayCoins: item.yesterdayCoins,
|
||||
// 保留原有字段（如 belongBy、useable 等）
|
||||
belongBy: item.belongBy,
|
||||
useable: item.useable,
|
||||
invitationType: item.invitationType,
|
||||
}));
|
||||
}
|
||||
|
||||
|
||||
})
|
||||
|
||||
}
|
||||
function handelClick() {
|
||||
filterdialogVisible.value = false
|
||||
}
|
||||
function reset() {
|
||||
searchForm.value.fansMin = null
|
||||
searchForm.value.fansMax = null
|
||||
searchForm.value.onlineFansMin = null
|
||||
searchForm.value.onlineFansMax = null
|
||||
searchForm.value.hostsCoinsMin = null
|
||||
searchForm.value.hostsCoinsMax = null
|
||||
searchForm.value.fllowernumMin = null
|
||||
searchForm.value.fllowernumMax = null
|
||||
}
|
||||
function handleClose(done) {
|
||||
console.log('关闭')
|
||||
// searchForm.value = {
|
||||
// dataType: '',
|
||||
// dataStart: '',
|
||||
// dataEnd: '',
|
||||
// }
|
||||
done()
|
||||
}
|
||||
|
||||
|
||||
//修改主播维护状态
|
||||
// function handleSelectChange(event, data) {
|
||||
|
||||
// upholdinfo({
|
||||
// "hostId": data.hostId,
|
||||
// "userId": userInfo.value.userId,
|
||||
// "tenantId": userInfo.value.tenantId,
|
||||
// // "comment": "我已经尽力维护，但是失败了",
|
||||
// "useable": event.target.value
|
||||
// }).then(res => {
|
||||
// console.log(res)
|
||||
// })
|
||||
// }
|
||||
|
||||
//更改主播维护备注
|
||||
|
||||
// function uphostcomment() {
|
||||
// upholdinfo({
|
||||
// "hostId": commentHost.value,
|
||||
// "userId": userInfo.value.userId,
|
||||
// "tenantId": userInfo.value.tenantId,
|
||||
// "comment": commentInfo.value,
|
||||
// }).then(res => {
|
||||
// console.log(res)
|
||||
// serch()
|
||||
// commentVisible.value = false
|
||||
// })
|
||||
// }
|
||||
|
||||
function filterTag(value, row) {
|
||||
console.log(row.useable, value)
|
||||
return row.useable === value;
|
||||
}
|
||||
|
||||
|
||||
//获取国家
|
||||
function getCountry() {
|
||||
getCountryinfo({}).then(res => {
|
||||
console.log(res)
|
||||
res.forEach(item => {
|
||||
if (item.countryGroupName) {
|
||||
options.value.push({ value: item.countryGroupName, label: item.countryGroupName })
|
||||
|
||||
}
|
||||
})
|
||||
console.log(options.value)
|
||||
}).catch(err => {
|
||||
console.log('getCountry', err)
|
||||
})
|
||||
}
|
||||
|
||||
//获取下级员工
|
||||
// const getStaff = () => {
|
||||
// getStaffList({
|
||||
// userId: userInfo.value.userId,
|
||||
// activeYn: userInfo.value.activeYn,
|
||||
// tenantId: userInfo.value.tenantId,
|
||||
// }).then(res => {
|
||||
// console.log(res)
|
||||
// res.forEach(item => {
|
||||
// staffOptions.value.push({
|
||||
// value: item.userId,
|
||||
// label: item.userName
|
||||
// })
|
||||
// })
|
||||
// })
|
||||
// }
|
||||
|
||||
|
||||
// //分配主播给员工
|
||||
// function allocation() {
|
||||
// managerhosts({
|
||||
// "manaId": userInfo.value.userId,
|
||||
// "userId": staffValue.value,
|
||||
// "tenantId": userInfo.value.tenantId,
|
||||
// "hostIds": selectHostList.value
|
||||
// }).then(res => {
|
||||
// if (res) {
|
||||
// dialogFormVisible.value = false
|
||||
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
|
||||
|
||||
//获取主播信息
|
||||
// const getTkhostdetail = (id) => {
|
||||
// tkhostdetail({
|
||||
// hostId: id,
|
||||
// // page: 1,
|
||||
// searchTimeStart: '20250401',
|
||||
// searchTimeEnd: '20250403'
|
||||
// }).then(res => {
|
||||
|
||||
// console.log(labelList.value)
|
||||
|
||||
// })
|
||||
|
||||
// }
|
||||
|
||||
|
||||
function openPopover(hostId, paramCode) {
|
||||
|
||||
isPopoverVisible[`${hostId}-${paramCode}`] = true;
|
||||
|
||||
|
||||
}
|
||||
|
||||
function closePopover(hostId, paramCode) {
|
||||
|
||||
// isPopoverVisible[`${hostId}-${paramCode}`] = false;
|
||||
}
|
||||
|
||||
|
||||
function openHTML(id) {
|
||||
givePyAnchorId(id)
|
||||
|
||||
// upholdinfo({
|
||||
// "hostId": id,
|
||||
// "userId": userInfo.value.userId,
|
||||
// "tenantId": userInfo.value.tenantId,
|
||||
// // "comment": "我已经尽力维护，但是失败了",
|
||||
// "useable": "Y"
|
||||
// }).then(res => {
|
||||
|
||||
// getlist();
|
||||
// })
|
||||
|
||||
}
|
||||
|
||||
// function openAccountName(idStr) {
|
||||
// if (idStr) {
|
||||
// hostNameVisible.value = true
|
||||
// accountName(idStr).then(res => {
|
||||
// staffId.value = JSON.stringify(res).replace(/[{}"]/g, '') // 移除所有 {} 和 "
|
||||
// .split(',') // 按逗号分割成数组
|
||||
|
||||
// console.log(res)
|
||||
// })
|
||||
// }
|
||||
// }
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.hostList {
|
||||
box-sizing: border-box;
|
||||
// height: 100vh;
|
||||
padding: 40px;
|
||||
|
||||
/* 页面无法选中 */
|
||||
// -webkit-user-select: none;
|
||||
// -moz-user-select: none;
|
||||
// -ms-user-select: none;
|
||||
// user-select: none;
|
||||
|
||||
.hostTable {
|
||||
width: 100%;
|
||||
padding: 40px 0;
|
||||
|
||||
.hostIdText {
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.serch-button {
|
||||
width: 80px;
|
||||
height: 47px;
|
||||
background: @btn-bg-color;
|
||||
border-radius: 10px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.put-button {
|
||||
width: 132px;
|
||||
height: 47px;
|
||||
background: @btn-bg-color;
|
||||
border-radius: 10px;
|
||||
border: none;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.el-dialog {
|
||||
|
||||
--el-dialog-font-line-height: 50px;
|
||||
--el-dialog-width: 600px;
|
||||
--el-dialog-border-radius: 8px;
|
||||
|
||||
// border: 10px solid @bg-color-light;
|
||||
}
|
||||
|
||||
.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__wrapper) {
|
||||
background-color: #F2FAF9;
|
||||
border: 1px solid @bg-color;
|
||||
height: 44px;
|
||||
}
|
||||
|
||||
::v-deep(.el-select__wrapper) {
|
||||
background-color: #F2FAF9;
|
||||
border: 1px solid @bg-color;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
::v-deep(.el-pagination.is-background .el-pager li.is-active) {
|
||||
background-color: @bg-color;
|
||||
}
|
||||
</style>
|
||||
765
src/views/hosts/workbenches.vue
Normal file
765
src/views/hosts/workbenches.vue
Normal file
@@ -0,0 +1,765 @@
|
||||
<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="20">
|
||||
<el-col :span="8">
|
||||
<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="8">
|
||||
<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="8">
|
||||
<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-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 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;
|
||||
}
|
||||
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);
|
||||
})
|
||||
}, 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;
|
||||
|
||||
.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>
|
||||
89
src/views/nav.vue
Normal file
89
src/views/nav.vue
Normal file
@@ -0,0 +1,89 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<Sidebar class="noneText" @activeIndex="activeIndexFn" />
|
||||
<div class="content ">
|
||||
<div v-show="activeIndexA == 1">
|
||||
<workbenches />
|
||||
</div>
|
||||
<div v-show="activeIndexA == 2">
|
||||
<hostsList />
|
||||
</div>
|
||||
<div style="position: absolute; bottom: 0; right: 0;">{{ version }}</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Sidebar from '../components/Sidebar.vue';
|
||||
import { RouterLink, RouterView } from 'vue-router'
|
||||
import hostsList from '@/views/hosts/hostsList.vue'
|
||||
import workbenches from '@/views/hosts/workbenches.vue'
|
||||
import { ref } from 'vue'
|
||||
import { getUser } from '@/utils/storage'
|
||||
// import { usePythonBridge } from '@/utils/pythonBridge'
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
let activeIndexA = ref(1)
|
||||
|
||||
function activeIndexFn(data) {
|
||||
activeIndexA.value = data
|
||||
console.log(data)
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
body,
|
||||
html {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.app-container {
|
||||
display: flex;
|
||||
width: 1600px;
|
||||
height: 900px;
|
||||
background-color: @bg-color;
|
||||
position: relative;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.noneText {
|
||||
/* 页面无法选中 */
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 200px;
|
||||
background-color: @bg-color;
|
||||
padding: 20px;
|
||||
/* box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1); */
|
||||
}
|
||||
|
||||
.content {
|
||||
margin-left: 280px;
|
||||
width: 1304px;
|
||||
height: 868px;
|
||||
background: #FFFFFF;
|
||||
border-radius: 36px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.center-justify {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user