From 489112d028a85a526c4e32bdf14b0ccf697d8b6c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B2=A1=E5=A4=8D=E4=B9=A0?= <2353956224@qq.com>
Date: Mon, 7 Apr 2025 13:14:56 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9F=A5=E8=AF=A2=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                   | 32 +++++++++++
 package.json                        |  1 +
 src/api/account.js                  |  3 +
 src/components/EChartsComponent.vue | 88 +++++++++++++++++++++++++++++
 src/views/hosts/hostsList.vue       | 62 +++++++++++++++++++-
 5 files changed, 183 insertions(+), 3 deletions(-)
 create mode 100644 src/components/EChartsComponent.vue

diff --git a/package-lock.json b/package-lock.json
index 2a3360c..2c03361 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
       "dependencies": {
         "axios": "^1.8.4",
         "core-js": "^3.8.3",
+        "echarts": "^5.6.0",
         "element-plus": "^2.9.7",
         "pinia": "^3.0.1",
         "vue": "^3.2.13",
@@ -5210,6 +5211,22 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/echarts": {
+      "version": "5.6.0",
+      "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.6.0.tgz",
+      "integrity": "sha512-oTbVTsXfKuEhxftHqL5xprgLoc0k7uScAwtryCgWF6hPYFLRwOUHiFmHGCBKP5NPFNkDVopOieyUqYGH8Fa3kA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "2.3.0",
+        "zrender": "5.6.1"
+      }
+    },
+    "node_modules/echarts/node_modules/tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
+      "license": "0BSD"
+    },
     "node_modules/ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -11555,6 +11572,21 @@
       "engines": {
         "node": ">=10"
       }
+    },
+    "node_modules/zrender": {
+      "version": "5.6.1",
+      "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.6.1.tgz",
+      "integrity": "sha512-OFXkDJKcrlx5su2XbzJvj/34Q3m6PvyCZkVPHGYpcCJ52ek4U/ymZyfuV1nKE23AyBJ51E/6Yr0mhZ7xGTO4ag==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "tslib": "2.3.0"
+      }
+    },
+    "node_modules/zrender/node_modules/tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
+      "license": "0BSD"
     }
   }
 }
diff --git a/package.json b/package.json
index f4ea089..f1d84b1 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
   "dependencies": {
     "axios": "^1.8.4",
     "core-js": "^3.8.3",
+    "echarts": "^5.6.0",
     "element-plus": "^2.9.7",
     "pinia": "^3.0.1",
     "vue": "^3.2.13",
diff --git a/src/api/account.js b/src/api/account.js
index 36b0c59..5b96f47 100644
--- a/src/api/account.js
+++ b/src/api/account.js
@@ -15,3 +15,6 @@ export function tkhostdata(data) {
 export function dicts(data) {
     return postAxios({ url: 'param/dicts', data })
 }
+export function tkhostdetail(data) {
+    return postAxios({ url: 'tkinfo/tkhostdetail', data })
+}
diff --git a/src/components/EChartsComponent.vue b/src/components/EChartsComponent.vue
new file mode 100644
index 0000000..a4cb9df
--- /dev/null
+++ b/src/components/EChartsComponent.vue
@@ -0,0 +1,88 @@
+<template>
+    <div ref="chart" style="width: 500px; height: 300px;"></div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+import { tkhostdata, dicts, tkhostdetail } from '@/api/account';
+
+export default {
+    name: 'EChartsComponent',
+    props: {
+        title: {
+            type: String,
+            required: true
+        },
+        id: {
+            type: String,
+            required: true
+        },
+        dataType: {
+            type: String,
+            required: true
+        }
+
+    },
+    mounted() {
+        this.initChart();
+        this.getTkhostdetail();
+    },
+    methods: {
+        initChart() {
+            const myChart = echarts.init(this.$refs.chart);
+            const option = {
+                title: {
+                    text: this.title
+                },
+                tooltip: {},
+                legend: {
+                    data: ['销量']
+                },
+                xAxis: {
+                    data: ['2025-03-29', '2025-03-30', '2025-03-31', '2025-04-01', '2025-04-02', '2025-04-03']
+                },
+                yAxis: {},
+                series: [
+                    {
+                        name: '金币数',
+                        type: 'line',
+                        data: [23266, 12144, 44467, 86686, 35637, 34534],
+                        smooth: true
+
+                    }
+                ]
+            };
+            myChart.setOption(option);
+        },
+        getTkhostdetail() {
+            tkhostdetail({
+                hostId: this.id,
+                dataType: this.dataType,
+                searchTimeStart: this.getCurrentDate()[0],
+                searchTimeEnd: this.getCurrentDate()[6]
+            }).then(res => {
+                res[0]
+
+            })
+        },
+        getCurrentDate() {
+            const dates = [];
+            const today = new Date();
+
+            for (let i = 6; i >= 0; i--) {
+                const date = new Date(today);
+                date.setDate(today.getDate() - i);
+
+                const year = date.getFullYear();
+                const month = String(date.getMonth() + 1).padStart(2, '0');
+                const day = String(date.getDate()).padStart(2, '0');
+
+                dates.push(`${year}${month}${day}`);
+            }
+
+            return dates;
+        }
+
+    }
+};
+</script>
\ No newline at end of file
diff --git a/src/views/hosts/hostsList.vue b/src/views/hosts/hostsList.vue
index 75abc21..f00e665 100644
--- a/src/views/hosts/hostsList.vue
+++ b/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">