工作台页面

src/App.vue

@@ -3,3 +3,25 @@
     <router-view />
   </div>
 </template>
+
+<script>
+
+const debounce = (fn, delay) => {
+  let timer
+  return (...args) => {
+    if (timer) {
+      clearTimeout(timer)
+    }
+    timer = setTimeout(() => {
+      fn(...args)
+    }, delay)
+  }
+}
+const _ResizeObserver = window.ResizeObserver
+window.ResizeObserver = class ResizeObserver extends _ResizeObserver {
+  constructor(callback) {
+    callback = debounce(callback, 200)
+    super(callback)
+  }
+}
+</script>

src/components/HelloWorld.vue

@@ -1,66 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank"
-          rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank"
-          rel="noopener">router</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank"
-          rel="noopener">vuex</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a>
-      </li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-
-a {
-  color: #42b983;
-}
-</style>

src/components/Sidebar.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="sidebar">
+    <h3>导航菜单</h3>
+    <ul>
+      <li>
+        <RouterLink to="/workBenches">工作台</RouterLink>
+      </li>
+      <li>
+        <RouterLink to="/hostsList">主播列表</RouterLink>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style scoped>
+.sidebar {
+  position: fixed;
+  left: 0;
+  top: 0;
+  height: 100vh;
+  width: 200px;
+  background-color: #f5f5f5;
+  padding: 20px;
+  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
+  box-sizing: border-box;
+}
+
+.sidebar ul {
+  list-style: none;
+  padding: 0;
+}
+
+.sidebar li {
+  margin-bottom: 10px;
+}
+
+.sidebar a {
+  text-decoration: none;
+  color: #333;
+  display: block;
+  padding: 8px;
+  border-radius: 4px;
+}
+
+.sidebar a:hover {
+  background-color: #e0e0e0;
+}
+</style>

src/router/index.js

@@ -7,10 +7,22 @@ const routes = [
     name: 'home',
     component: HomeView
   },
+
   {
-    path: '/hostsList',
-    name: 'hostsList',
-    component: () => import(/* webpackChunkName: "hostsList" */ '../views/hostsList.vue')
+    path: '/nav',
+    name: 'nav',
+    component: () => import(/* webpackChunkName: "hostsList" */ '../views/nav.vue'),
+    children: [
+      {
+        path: '/hostsList',
+        name: 'hostsList',
+        component: () => import(/* webpackChunkName: "hostsList" */ '../views/hosts/hostsList.vue')
+      },
+      {
+        path: '/workBenches',
+        name: 'workBenches',
+        component: () => import(/* webpackChunkName: "hostsList" */ '../views/hosts/workbenches.vue')
+      },]
   }
 ]
 

src/views/HomeView.vue

@@ -91,6 +91,9 @@ const router = useRouter();
 // let inputValue = ref('999');
 // const output = ref('');
 // const { callPython, getPythonData } = usePythonBridge();
+
+
+
 const formData = ref({
 	userId: '',
 	password: '',
@@ -106,7 +109,7 @@ const onSubmit = () => {
 		console.log(res)
 		setToken(res.currcode)
 		setUser(res)
-		router.push('/hostsList');
+		router.push('/nav');
 
 	})
 
@@ -117,9 +120,7 @@ const onSubmit = () => {
 
 <style lang="less">
 .main {
-	height: 100vh;
 	width: 100vw;
-	// background-color: #ffffff;
 
 	.container {
 		display: flex;
@@ -127,6 +128,7 @@ const onSubmit = () => {
 		.left {
 			width: 40%;
 			height: 100vh;
+			box-sizing: border-box;
 			background-color: #1db97d;
 			padding: 20px 40px;
 
@@ -134,7 +136,6 @@ const onSubmit = () => {
 
 		.right {
 			width: 60%;
-			height: 100vh;
 			background-color: #ffffff;
 			padding: 20px 40px 20px 50px;
 

src/views/hosts/hostsList.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="main">
     <div>
-      <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;" />
 
@@ -19,9 +19,9 @@
     </div>
 
 
-    <div style="width: 100%;" class="center-justify">
-      <el-table :data="tableData" stripe style="width: 100%">
-        <el-table-column prop="hostId" label="主播id" width="180" />
+    <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" />
@@ -88,6 +88,7 @@ function serch() {
   getlist();
 }
 
+//获取主播列表
 const getlist = () => {
   tkhostdata({
     searchTime: searchForm.value.time,
@@ -106,7 +107,7 @@ const getlist = () => {
   })
 
 }
-
+//获取字典
 const getdictionary = () => {
   dicts({
     paramType: "hostsdata",
@@ -125,8 +126,15 @@ const getdictionary = () => {
 
 <style lang="less">
 .main {
+  box-sizing: border-box;
   height: 100vh;
-  width: 100vw;
+  width: 100%;
+  padding: 40px;
+
+  .hostTable {
+    width: 100%;
+    padding: 40px 0;
+  }
 }
 
 .center-line {

src/views/hosts/workbenches.vue

@@ -0,0 +1,101 @@
+<template>
+    <div class="container">
+        <el-card class="box-card">
+            <template #header>
+                <div class="card-header">
+                    <span>工作台</span>
+                </div>
+            </template>
+            <el-row :gutter="20">
+                <el-col :span="8">
+                    <div class="input-group">
+                        <label>设置金币数量</label>
+                        <el-input type='number' v-model="range1.min" :min="0" :max="range1.max - 1" placeholder="最小值"
+                            style="width: 100%">
+                            <template #prepend>最小金币数</template>
+                        </el-input>
+                        <el-input type='number' v-model="range1.max" :min="range1.min + 1" :max="100" placeholder="最大值"
+                            style="width: 100%; margin-top: 10px"> <template #prepend>最大金币数</template>
+                        </el-input>
+                    </div>
+                </el-col>
+                <el-col :span="8">
+                    <div class="input-group">
+                        <label>设置粉丝数量</label>
+                        <el-input type='number' v-model="range2.min" :min="0" :max="range2.max - 1" placeholder="最小值"
+                            style="width: 100%">
+                            <template #prepend>最小粉丝数</template>
+                        </el-input>
+                        <el-input type='number' v-model="range2.max" :min="range2.min + 1" :max="100" placeholder="最大值"
+                            style="width: 100%; margin-top: 10px">
+                            <template #prepend>最大粉丝数</template>
+                        </el-input>
+                    </div>
+                </el-col>
+                <el-col :span="8">
+                    <div class="input-group">
+                        <label>后台查询频率</label>
+                        <el-input type='number' v-model="range3.min" :min="0" :max="range3.max - 1" placeholder="次/小时"
+                            style="width: 100%">
+                            <template #append>次/小时</template>
+                        </el-input>
+                        <el-input type='number' v-model="range3.max" :min="range3.min + 1" :max="100"
+                            placeholder="次/24小时" style="width: 100%; margin-top: 10px">
+                            <template #append>次/24小时</template>
+                        </el-input>
+                    </div>
+                </el-col>
+            </el-row>
+            <div style="margin-top: 20px; text-align: center">
+                <el-button type="primary" @click="submit">开始获取数据</el-button>
+                <el-button @click="reset">重置数据</el-button>
+            </div>
+        </el-card>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const range1 = ref({ min: 0, max: 0 });
+const range2 = ref({ min: 0, max: 0 });
+const range3 = ref({ min: 0, max: 0 });
+
+const submit = () => {
+    console.log('提交的区间值：', range1.value, range2.value, range3.value);
+};
+
+const reset = () => {
+    range1.value = { min: 0, max: 0 };
+    range2.value = { min: 0, max: 0 };
+    range3.value = { min: 0, max: 0 };
+};
+</script>
+
+<style scoped>
+.container {
+    margin: 0 auto;
+    padding: 20px;
+}
+
+.box-card {
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+}
+
+.card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.input-group {
+    margin-bottom: 20px;
+}
+
+label {
+    display: block;
+    margin-bottom: 8px;
+    font-weight: bold;
+    color: #606266;
+}
+</style>

src/views/nav.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="app-container">
+    <Sidebar />
+    <div class="content">
+      <RouterView />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import Sidebar from '../components/Sidebar.vue';
+import { RouterLink, RouterView } from 'vue-router'
+
+</script>
+
+<style>
+body,
+html {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+}
+
+.app-container {
+  display: flex;
+  height: 100vh;
+}
+
+.sidebar {
+  width: 200px;
+  background-color: #f5f5f5;
+  padding: 20px;
+  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
+}
+
+.content {
+  width: calc(100% - 200px);
+  margin-left: 200px;
+  padding: 20px;
+
+
+}
+</style>