tk-mini-program-PC/src/views/hosts/hostsList.vue

<template>
  <div class="main">
    <div>
      <div style="display: flex;">
        <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>
        <div></div>
        <el-date-picker v-model="searchForm.time" type="date" value-format="YYYYMMDD" placeholder="选择查询时间" size="large"
          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 :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>

            </template>
          </el-table-column>
          <el-table-column prop="hostName" label="主播名字" min-width="200">
            <template #default="scope">
              {{ 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">
              <el-popover v-if="!(label.paramCode == 'hostcoins' || label.paramCode == 'ysthostcoins')"
                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"
                    :time="searchForm.time"></component>
                </div>
                <template #reference>
                  <span @mouseover="openPopover(scope.row.hostId, label.paramCode)"
                    @mouseout="closePopover(scope.row.hostId, label.paramCode)">
                    {{ scope.row[label.paramCode] }}
                  </span>
                </template>
              </el-popover>

              <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"
                    :time="searchForm.time">
                  </component>
                </div>
                <template #reference>
                  <!-- 鼠标移入时开启 -->
                  <span @mouseover="openPopover(scope.row.hostId, label.paramCode)"
                    @mouseout="closePopover(scope.row.hostId, label.paramCode)">
                    {{ scope.row[label.paramCode] }}
                  </span>
                </template>
              </el-popover>
            </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>
  </div>
</template>

<script setup>
// import { getToken, setToken, removeToken } from '@/utils/storage'
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';

const loading = ref(false)
//py方法
const { givePyAnchorId } = usePythonBridge();

let labelList = ref([])
const tableData = ref([])
//选择国家
const searchForm = ref({
  country: '',
  time: ''
})

//分页
let pageSize = ref(10)
let page = ref(1)
let total = ref(0)
//是否渲染
const isPopoverVisible = reactive({})


const options = [
  {
    value: '日本',
    label: '日本',
  },
  {
    value: '美国',
    label: '美国',
  },
  {
    value: '荷兰',
    label: '荷兰',
  },
  {
    value: '澳大利亚',
    label: '澳大利亚',
  }
]

onMounted(() => {
  getdictionary()
})

function serch() {

  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
  tkhostdata({
    searchTime: searchForm.value.time,
    region: searchForm.value.country,
    pageSize: pageSize.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 }
      tableData.value.push(item)
    })
  })

}
//获取字典
const getdictionary = () => {
  dicts({
    paramType: "hostsdata",
    // page: 1,
    offset: 1,
    pageSize: 100
  }).then(res => {
    // labelList.value = res.records
    labelList.value = res
    console.log(labelList.value)

  })

}
//获取主播信息
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)

}
</script>

<style lang="less">
.main {
  box-sizing: border-box;
  // height: 100vh;
  width: 100%;
  padding: 40px;

  .hostTable {
    width: 100%;
    padding: 40px 0;

    .hostIdText {
      text-decoration: underline;
      cursor: pointer;
      color: #0f0092;
    }
  }

  .serch-button {
    width: 80px;
    height: 47px;
    background: #E7CA92;
    border-radius: 10px;
    border: none;
  }

  .put-button {
    width: 132px;
    height: 47px;
    background: #E7CA92;
    border-radius: 10px;
    border: none;

  }
}

.center-line {
  display: flex;
  flex-direction: column;
  align-items: center;
  // justify-content: center;
}

.center-justify {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.center-align {
  display: flex;
  justify-content: space-between;

}

.center-flex {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

<style scoped>
::v-deep(.el-input__wrapper) {
  background-color: #F2FAF9;
  border: 1px solid #B7CEC5;
  height: 48px;
}

::v-deep(.el-select__wrapper) {
  background-color: #F2FAF9;
  border: 1px solid #B7CEC5;
  height: 48px;
}

::v-deep(.el-pagination.is-background .el-pager li.is-active) {
  background-color: #338F6A;
}
</style>