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 style="margin-left: 50px;" type="primary" @click="serch">查询</el-button>
      </div>

      <div class="hostTable center-justify">
        <el-table size="small" :data="tableData" stripe>
          <el-table-column prop="hostId" label="主播id" width="200" />
          <el-table-column prop="hostName" label="主播名字" min-width="200" />

          <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"></component>
                </div>
                <template #reference>
                  <span @mouseover="isPopoverVisible[`${scope.row.hostId}-${label.paramCode}`] = true"
                    @mouseout="isPopoverVisible[`${scope.row.hostId}-${label.paramCode}`] = false">
                    {{ 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"></component>
                </div>
                <template #reference>
                  <!-- 鼠标移入时开启 -->
                  <span @mouseover="isPopoverVisible[`${scope.row.hostId}-${label.paramCode}`] = true">
                    {{ 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 :default-current-page="4" v-model:current-page="page" background layout="prev, pager, next"
          :total="total" @change="serch" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { getToken, setToken, removeToken } from '@/utils/storage'
import { tkhostdata, dicts, tkhostdetail } from '@/api/account';
import { ref, reactive, onMounted } from 'vue';
import EChartsComponent from '@/components/EChartsComponent.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 isPopoverVisible = reactive({})


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)

  })

}
//获取主播信息
const getTkhostdetail = (id) => {
  tkhostdetail({
    hostId: id,
    // page: 1,
    searchTimeStart: '20250401',
    searchTimeEnd: '20250403'
  }).then(res => {

    console.log(labelList.value)

  })

}

</script>

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

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

.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>