工作台页面

2025-04-03 20:25:25 +08:00
parent 32cbc6404a
commit d7d08675c6
9 changed files with 250 additions and 81 deletions
--- a/src/views/hosts/hostsList.vue
+++ b/src/views/hosts/hostsList.vue
@@ -0,0 +1,164 @@
+<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>
+
+
+      <!-- <el-button type="primary" @click="getlist">查询列表</el-button>
+      <el-button type="primary" @click="getdictionary">查询字典</el-button> -->
+
+    </div>
+
+
+    <div class="hostTable center-justify">
+      <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>
+    </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>
+</template>
+
+<script setup>
+import { getToken, setToken, removeToken } from '@/utils/storage'
+import { tkhostdata, dicts } from '@/api/account';
+import { ref, reactive, onMounted } from '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 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)
+
+  })
+
+}
+</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>