查询列表功能
This commit is contained in:
@@ -1,5 +0,0 @@
|
||||
<template>
|
||||
<div class="about">
|
||||
<h1>This is an about page</h1>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,152 +1,219 @@
|
||||
<template>
|
||||
<div>
|
||||
<button @click="callPython">设置数据"123"到 Python</button>
|
||||
<button @click="getPythonData">从 Python 获取数据</button>
|
||||
<button @click="clickChildButton">从tk模拟点击按钮 </button>
|
||||
<input type="text" id="input" v-model="inputValue"></input>
|
||||
<div id="output">{{ output }}</div>
|
||||
<h1>嵌入tk页面</h1>
|
||||
<iframe id="myIframe" src="https://live-backstage.tiktok.com/portal/overview" width="100%" height="600px"
|
||||
frameborder="0" ref="myIframe"></iframe>
|
||||
</div>
|
||||
<div class="main">
|
||||
<!-- <button @click="callPython">设置数据"123"到 Python</button>
|
||||
<button @click="getPythonData">从 Python 获取数据</button> -->
|
||||
<!-- <input type="text" id="input" v-model="inputValue"></input>
|
||||
<div id="output">{{ output }}</div> -->
|
||||
|
||||
<div class="container">
|
||||
<div class="left">
|
||||
|
||||
</div>
|
||||
<div class="right">
|
||||
<!-- 设置 -->
|
||||
<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>
|
||||
|
||||
<!-- logo -->
|
||||
<div class="logo">
|
||||
<div style="height: 80px; width: 300px; background-color: aqua;">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- From -->
|
||||
<div class="from">
|
||||
<div class="from-title">
|
||||
<div>账号登陆</div>
|
||||
</div>
|
||||
|
||||
<div class="from-input">
|
||||
<el-form label-position="left" label-width="100px" :model="formData">
|
||||
|
||||
<div class="from-input-item">
|
||||
<div class="from-input-item-title center-justify">
|
||||
账号：
|
||||
</div>
|
||||
<el-input style="height: 50px;" v-model="formData.userId" placeholder="请输入登录账号"
|
||||
clearable />
|
||||
</div>
|
||||
|
||||
<div class="from-input-item">
|
||||
<div class="from-input-item-title center-justify">
|
||||
密码：
|
||||
</div>
|
||||
<el-input style="height: 50px;" v-model="formData.password" type="password"
|
||||
placeholder="请输入登录密码" show-password />
|
||||
</div>
|
||||
|
||||
<div class="from-input-item">
|
||||
<el-button style="width: 100%; height: 40px;" type="primary"
|
||||
@click="onSubmit">登录</el-button>
|
||||
</div>
|
||||
|
||||
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { ref, reactive, onMounted } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { login } from '@/api/account';
|
||||
import { getToken, setToken, setUser } from '@/utils/storage'
|
||||
|
||||
const myIframe = ref(null);
|
||||
let inputValue = ref('999');
|
||||
// 确保 DOM 渲染完成后再访问 iframe
|
||||
onMounted(() => {
|
||||
if (myIframe.value) {
|
||||
// console.log('Iframe mounted:', myIframe.value);
|
||||
onIframeLoad();
|
||||
}
|
||||
});
|
||||
const router = useRouter();
|
||||
|
||||
const onIframeLoad = () => {
|
||||
if (myIframe.value) {
|
||||
const iframeDoc = myIframe.value.contentDocument;
|
||||
// import { usePythonBridge } from '@/utils/pythonBridge';
|
||||
|
||||
// const button = iframeDoc.querySelector('button[data-id="add-host-btn"]')[0];
|
||||
// if (button) {
|
||||
// button.click(); // 触发点击事件
|
||||
// }
|
||||
// let inputValue = ref('999');
|
||||
// const output = ref('');
|
||||
// const { callPython, getPythonData } = usePythonBridge();
|
||||
const formData = ref({
|
||||
userId: '',
|
||||
password: '',
|
||||
})
|
||||
|
||||
|
||||
const onSubmit = () => {
|
||||
console.log('submit!')
|
||||
login({
|
||||
userId: formData.value.userId,
|
||||
password: formData.value.password,
|
||||
}).then(res => {
|
||||
console.log(res)
|
||||
setToken(res.currcode)
|
||||
setUser(res)
|
||||
router.push('/hostsList');
|
||||
|
||||
})
|
||||
|
||||
|
||||
console.log('Iframe loaded:', iframeDoc);
|
||||
if (iframeDoc) {
|
||||
// console.log('Iframe loaded:', iframeDoc);
|
||||
}
|
||||
|
||||
// 注入脚本
|
||||
const script = iframeDoc.createElement('script');
|
||||
// console.log('script:', script);
|
||||
script.textContent = `
|
||||
(function() {
|
||||
// 拦截 XMLHttpRequest
|
||||
const originalOpen = XMLHttpRequest.prototype.open;
|
||||
const originalSend = XMLHttpRequest.prototype.send;
|
||||
|
||||
XMLHttpRequest.prototype.open = function(method, url, async, user, password) {
|
||||
this._method = method; // 保存请求方法
|
||||
this._url = url; // 保存请求的URL
|
||||
return originalOpen.apply(this, arguments);
|
||||
};
|
||||
|
||||
XMLHttpRequest.prototype.send = function(body) {
|
||||
if (this._url && this._url.includes('batch_check_anchor')) {
|
||||
this.addEventListener('load', function() {
|
||||
console.log('[XHR] 拦截到 batch_check_anchor 请求:');
|
||||
console.log('URL:', this._url);
|
||||
console.log('方法:', this._method);
|
||||
console.log('请求体:', body);
|
||||
console.log('响应:', this.responseText);
|
||||
console.log('------------------------');
|
||||
});
|
||||
}
|
||||
return originalSend.apply(this, arguments);
|
||||
};
|
||||
|
||||
// 拦截 fetch
|
||||
const originalFetch = window.fetch;
|
||||
|
||||
window.fetch = async function(...args) {
|
||||
const [input, init] = args;
|
||||
const url = typeof input === 'string' ? input : input.url;
|
||||
|
||||
if (url && url.includes('batch_check_anchor')) {
|
||||
console.log('[Fetch] 拦截到 batch_check_anchor 请求:');
|
||||
console.log('URL:', url);
|
||||
console.log('方法:', (init && init.method) || 'GET');
|
||||
console.log('请求体:', (init && init.body) || null);
|
||||
|
||||
const response = await originalFetch.apply(this, args);
|
||||
const clonedResponse = response.clone();
|
||||
|
||||
try {
|
||||
const data = await clonedResponse.json();
|
||||
console.log('响应:', data);
|
||||
} catch (e) {
|
||||
const text = await clonedResponse.text();
|
||||
console.log('响应:', text);
|
||||
}
|
||||
console.log('------------------------');
|
||||
return response;
|
||||
}
|
||||
|
||||
return originalFetch.apply(this, args);
|
||||
};
|
||||
|
||||
console.log('batch_check_anchor 拦截器已成功注入');
|
||||
|
||||
console.log("123123123123132",document.querySelectorAll('button[data-id="view-more"]'))
|
||||
})();
|
||||
`;
|
||||
iframeDoc.body.appendChild(script);
|
||||
} else {
|
||||
console.error('无法访问 iframe 的 contentDocument');
|
||||
}
|
||||
|
||||
console.log(123)
|
||||
} else {
|
||||
console.error('无法获取 iframe 引用');
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
const output = ref('');
|
||||
const bridge = ref(null);
|
||||
|
||||
onMounted(() => {
|
||||
new QWebChannel(qt.webChannelTransport, function (channel) {
|
||||
bridge.value = channel.objects.bridge;
|
||||
});
|
||||
});
|
||||
|
||||
const callPython = () => {
|
||||
if (bridge.value) {
|
||||
bridge.value.stringFromJs("123")
|
||||
}
|
||||
};
|
||||
|
||||
const getPythonData = () => {
|
||||
if (bridge.value) {
|
||||
bridge.value.stringToJs(function (result) {
|
||||
alert(result); // 这里才会显示返回值
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
const clickChildButton = () => {
|
||||
const iframeDoc = myIframe.value.contentDocument;
|
||||
console.log(iframeDoc)
|
||||
// 查找子页面中的按钮（假设按钮 id 为 child-button）
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.main {
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
// background-color: #ffffff;
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
|
||||
.left {
|
||||
width: 40%;
|
||||
height: 100vh;
|
||||
background-color: #1db97d;
|
||||
padding: 20px 40px;
|
||||
|
||||
}
|
||||
|
||||
.right {
|
||||
width: 60%;
|
||||
height: 100vh;
|
||||
background-color: #ffffff;
|
||||
padding: 20px 40px 20px 50px;
|
||||
|
||||
.setup {
|
||||
display: flex;
|
||||
|
||||
.setup-item {
|
||||
padding: 10px 6px;
|
||||
display: flex;
|
||||
|
||||
div {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
background-color: red;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.logo {
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.from {
|
||||
|
||||
.from-title {
|
||||
display: flex;
|
||||
padding: 10px 0 0 0;
|
||||
|
||||
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: 20px 0;
|
||||
|
||||
.from-input-item-title {
|
||||
width: 80px;
|
||||
height: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.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>
|
||||
|
||||
156
src/views/hostsList.vue
Normal file
156
src/views/hostsList.vue
Normal file
@@ -0,0 +1,156 @@
|
||||
<template>
|
||||
<div class="main">
|
||||
<div>
|
||||
<div>
|
||||
<el-select v-model="searchForm.country" placeholder="选择国家" size="large" style="width: 240px">
|
||||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
|
||||
<el-date-picker v-model="searchForm.time" type="date" value-format="YYYYMMDD" placeholder="选择查询时间" size="large"
|
||||
style="margin-left: 50px;" />
|
||||
|
||||
<el-button style="margin-left: 50px;" type="primary" @click="serch">查询</el-button>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- <el-button type="primary" @click="getlist">查询列表</el-button>
|
||||
<el-button type="primary" @click="getdictionary">查询字典</el-button> -->
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div style="width: 100%;" class="center-justify">
|
||||
<el-table :data="tableData" stripe style="width: 100%">
|
||||
<el-table-column prop="hostId" label="主播id" width="180" />
|
||||
<el-table-column prop="hostName" label="主播名字" min-width="200" />
|
||||
<el-table-column v-for="label in labelList" :prop="label.paramCode" :label="label.paramCodeMeaning"
|
||||
width="150" />
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="center-justify" style="margin-top: 30px;">
|
||||
<el-pagination :default-current-page="4" v-model:current-page="page" background layout="prev, pager, next"
|
||||
:total="total" @change="serch" />
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { getToken, setToken, removeToken } from '@/utils/storage'
|
||||
import { tkhostdata, dicts } from '@/api/account';
|
||||
import { ref, reactive, onMounted } from 'vue';
|
||||
|
||||
|
||||
let labelList = ref([])
|
||||
const tableData = ref([])
|
||||
//选择国家
|
||||
const searchForm = ref({
|
||||
country: '',
|
||||
time: ''
|
||||
})
|
||||
|
||||
//分页
|
||||
let pageSize = ref(10)
|
||||
let page = ref(1)
|
||||
let total = ref(0)
|
||||
|
||||
const options = [
|
||||
{
|
||||
value: '日本',
|
||||
label: '日本',
|
||||
},
|
||||
{
|
||||
value: '美国',
|
||||
label: '美国',
|
||||
},
|
||||
{
|
||||
value: '荷兰',
|
||||
label: '荷兰',
|
||||
},
|
||||
{
|
||||
value: '澳大利亚',
|
||||
label: '澳大利亚',
|
||||
}
|
||||
]
|
||||
|
||||
onMounted(() => {
|
||||
getdictionary()
|
||||
})
|
||||
|
||||
function serch() {
|
||||
console.log("pageSize.value", pageSize.value)
|
||||
console.log("page.value", page.value)
|
||||
console.log("searchForm.value.country", searchForm.value.country)
|
||||
console.log("time.value", searchForm.value.time)
|
||||
getdictionary();
|
||||
getlist();
|
||||
}
|
||||
|
||||
const getlist = () => {
|
||||
tkhostdata({
|
||||
searchTime: searchForm.value.time,
|
||||
region: searchForm.value.country,
|
||||
pageSize: pageSize.value,
|
||||
page: page.value
|
||||
}).then(res => {
|
||||
total.value = res.total
|
||||
tableData.value = []
|
||||
res.records.forEach(item => {
|
||||
item = { ...item, ...item.infoMap }
|
||||
console.log(item)
|
||||
tableData.value.push(item)
|
||||
})
|
||||
console.log(tableData.value)
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
const getdictionary = () => {
|
||||
dicts({
|
||||
paramType: "hostsdata",
|
||||
// page: 1,
|
||||
offset: 1,
|
||||
pageSize: 100
|
||||
}).then(res => {
|
||||
// labelList.value = res.records
|
||||
labelList.value = res
|
||||
console.log(labelList.value)
|
||||
|
||||
})
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.main {
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
.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>
|
||||
Reference in New Issue
Block a user