查询列表

src/views/hosts/hostsList.vue

@@ -23,8 +23,45 @@
       <el-table :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" :prop="label.paramCode" :label="label.paramCodeMeaning"
-          width="150" />
+
+        <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[label.paramCode]"
+                  :title="label.paramCodeMeaning" :id="scope.row.hostId" :dataType="label.paramCode"></component>
+
+
+              </div>
+              <template #reference>
+                <span @mouseover="isPopoverVisible[label.paramCode] = true"> {{ 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[label.paramCode]"
+                  :title="label.paramCodeMeaning" :id="scope.row.hostId" :dataType="label.paramCode"></component>
+
+              </div>
+              <template #reference>
+                <span @mouseover="isPopoverVisible[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;">
@@ -39,8 +76,9 @@
 
 <script setup>
 import { getToken, setToken, removeToken } from '@/utils/storage'
-import { tkhostdata, dicts } from '@/api/account';
+import { tkhostdata, dicts, tkhostdetail } from '@/api/account';
 import { ref, reactive, onMounted } from 'vue';
+import EChartsComponent from '@/components/EChartsComponent.vue';
 
 
 let labelList = ref([])
@@ -55,6 +93,9 @@ const searchForm = ref({
 let pageSize = ref(10)
 let page = ref(1)
 let total = ref(0)
+//是否渲染
+const isPopoverVisible = reactive({})
+
 
 const options = [
   {
@@ -122,6 +163,21 @@ const getdictionary = () => {
   })
 
 }
+//获取主播信息
+const getTkhostdetail = (id) => {
+  tkhostdetail({
+    hostId: id,
+    // page: 1,
+    searchTimeStart: '20250401',
+    searchTimeEnd: '20250403'
+  }).then(res => {
+
+    console.log(labelList.value)
+
+  })
+
+}
+
 </script>
 
 <style lang="less">