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

完善功能

Browse Source
This commit is contained in:
没复习
2025-04-10 18:11:03 +08:00
parent b71c2bd071
commit 0bbe30bc7e
9 changed files with 324 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -10,11 +10,13 @@
style="margin-left: 50px;" />
<el-button class="serch-button" style="margin-left: 50px;" type="primary" @click="serch">查询</el-button>
<el-button class="put-button" :disabled="tableData.length == 0" type="primary"
@click="exportList">导出Excel数据</el-button>
</div>
<div class="hostTable center-justify">
<el-table size="small" :data="tableData" stripe v-loading="loading">
<el-table-column prop="hostId" label="主播id" width="200">
<el-table :data="tableData" stripe v-loading="loading" height="500">
<el-table-column fixed prop="hostId" label="主播id" width="200">
<template #default="scope">
<div class="hostIdText" @click="openHTML(scope.row.hostId)"> {{ scope.row.hostId }}</div>
@@ -25,7 +27,11 @@
{{ scope.row.hostName }}
</template>
</el-table-column>
<el-table-column prop="hostlevel" label="等级" width="120">
<template #default="scope">
{{ scope.row.hostlevel }}
</template>
</el-table-column>
<el-table-column v-for="label in labelList" :key="label.paramCode" :prop="label.paramCode"
:label="label.paramCodeMeaning" width="120">
<template #default="scope">
@@ -33,7 +39,8 @@
placement="bottom" :width="600" trigger="hover">
<div style="height: 300px;">
<component :is="EChartsComponent" v-if="isPopoverVisible[`${scope.row.hostId}-${label.paramCode}`]"
:title="label.paramCodeMeaning" :id="scope.row.hostId" :dataType="label.paramCode"></component>
:title="label.paramCodeMeaning" :id="scope.row.hostId" :dataType="label.paramCode"
:time="searchForm.time"></component>
</div>
<template #reference>
<span @mouseover="openPopover(scope.row.hostId, label.paramCode)"
@@ -46,7 +53,9 @@
<el-popover v-else placement="bottom" :width="500" trigger="hover">
<div style="height: 300px;">
<component :is="EChartsComponent" v-if="isPopoverVisible[`${scope.row.hostId}-${label.paramCode}`]"
:title="label.paramCodeMeaning" :id="scope.row.hostId" :dataType="label.paramCode"></component>
:title="label.paramCodeMeaning" :id="scope.row.hostId" :dataType="label.paramCode"
:time="searchForm.time">
</component>
</div>
<template #reference>
<!-- 鼠标移入时开启 -->
@@ -69,8 +78,9 @@
</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" />
<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>
</div>
@@ -78,8 +88,9 @@
<script setup>
// import { getToken, setToken, removeToken } from '@/utils/storage'
import { tkhostdata, dicts, tkhostdetail } from '@/api/account';
import { tkhostdata, dicts, tkhostdetail, exporthosts, downList } from '@/api/account';
import { usePythonBridge, } from '@/utils/pythonBridge'
import { getUser } from '@/utils/storage'
import { ref, reactive, onMounted } from 'vue';
import EChartsComponent from '@/components/EChartsComponent.vue';
@@ -127,13 +138,50 @@ onMounted(() => {
})
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)
getlist();
}
function exportList() {
downList('export/hostsinfo',
{
searchTime: searchForm.value.time,
region: searchForm.value.country,
pageSize: pageSize.value,
page: page.value,
userId: getUser().userId,
userType: getUser().userType
}
);
// exporthosts({
// searchTime: searchForm.value.time,
// region: searchForm.value.country,
// pageSize: pageSize.value,
// page: page.value,
// userId: getUser().userId,
// userType: getUser().userType
// }).then(res => {
// const blob = new Blob([res], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
// const url = window.URL.createObjectURL(blob);
// const a = document.createElement('a');
// a.href = url;
// a.download = 'table-data.xlsx'; // 下载的文件名
// document.body.appendChild(a);
// a.click();
// a.remove();
// window.URL.revokeObjectURL(url);
// })
}
function handleSizeChange(val) {
console.log(`${val} items per page`)
getlist();
}
function handleCurrentChange(val) {
console.log(`current page: ${val}`)
getlist();
}
//获取主播列表
const getlist = () => {
loading.value = true
@@ -141,17 +189,17 @@ const getlist = () => {
searchTime: searchForm.value.time,
region: searchForm.value.country,
pageSize: pageSize.value,
page: page.value
page: page.value,
userId: getUser().userId,
userType: getUser().userType
}).then(res => {
loading.value = false
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)
})
}
@@ -208,7 +256,7 @@ function openHTML(id) {
<style lang="less">
.main {
box-sizing: border-box;
height: 100vh;
// height: 100vh;
width: 100%;
padding: 40px;
@@ -228,6 +276,16 @@ function openHTML(id) {
height: 47px;
background: #E7CA92;
border-radius: 10px;
border: none;
}
.put-button {
width: 132px;
height: 47px;
background: #E7CA92;
border-radius: 10px;
border: none;
}
}