添加 计时器功能 详细筛选功能 分配状态字段

src/views/hosts/workbenches.vue

@@ -6,6 +6,7 @@
                 <div>有效主播: <span>{{ hostData.validAnchorsCount }}</span></div>
                 <div> 已查询: <span>{{ hostData.checkedDataCount }}</span></div>
                 <div>可邀请: <span>{{ hostData.canInvitationCount }}</span></div>
+                <div>运行时间: <span>{{ formattedTime }}</span></div>
 
             </div>
             <div class="center-line" style="padding-top: 15vh;">
@@ -113,7 +114,7 @@
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, computed } from 'vue';
 import { usePythonBridge, } from '@/utils/pythonBridge'
 import { setNumData, getNumData, getUser, setTkUser, getTkUser } from '@/utils/storage'
 import { ElMessage, ElMessageBox } from 'element-plus'
@@ -132,7 +133,6 @@ let hostData = ref({
     validAnchorsCount: 0,
     canInvitationCount: 0,
     checkedDataCount: 0,
-
 });
 //是否开启tk
 // let isTk = ref(true);
@@ -179,6 +179,7 @@ let pyData = ref({
 //按钮提交状态
 let submitting = ref(true);
 
+
 onMounted(() => {
     //从缓存获取数据
     if (getNumData()) {
@@ -194,7 +195,6 @@ onMounted(() => {
     tkaccountuse(tkData.value[1].account, 1)
 
     getIpInfo()
-    //查询次数查询
 
 
 })
@@ -281,7 +281,9 @@ const submit = () => {
                 tenantId: getUser().tenantId,
                 userId: getUser().userId,
             })).then((res) => {
-
+                //开始计时器
+                startTimer();
+                //开启查询次数
                 getHostTimer.value = setInterval(() => {
                     fetchDataCount().then((res) => {
                         hostData.value = JSON.parse(res);
@@ -318,6 +320,7 @@ const unsubmit = () => {
         tenantId: getUser().tenantId,
         userId: getUser().userId,
     })).then((res) => {
+        pauseTimer();
         pyData.value.isStart = true;
         clearInterval(getHostTimer.value);
         getHostTimer.value = null;
@@ -401,6 +404,44 @@ function tkaccountuse(id, index) {
     })
 
 }
+
+const isRunning = ref(false);
+const totalSeconds = ref(0);
+//定时器
+let timerCrawl = null;
+//清空时间   并开始运行
+const startTimer = () => {
+    resetTimer();
+    if (isRunning.value) return;
+    isRunning.value = true;
+    timerCrawl = setInterval(() => {
+        totalSeconds.value++;
+    }, 1000);
+};
+
+//结束运行 暂停
+const pauseTimer = () => {
+    isRunning.value = false;
+    clearInterval(timerCrawl);
+};
+//清空时间
+const resetTimer = () => {
+    isRunning.value = false;
+    clearInterval(timerCrawl);
+    totalSeconds.value = 0;
+};
+// 格式化时间为 HH:MM:SS
+const formattedTime = computed(() => {
+    const hours = Math.floor(totalSeconds.value / 3600);
+    const minutes = Math.floor((totalSeconds.value % 3600) / 60);
+    const seconds = totalSeconds.value % 60;
+
+    return [
+        hours.toString().padStart(2, '0'),
+        minutes.toString().padStart(2, '0'),
+        seconds.toString().padStart(2, '0')
+    ].join(':');
+});
 </script>
 
 <style scoped lang="less">
@@ -435,7 +476,7 @@ function tkaccountuse(id, index) {
     background: #FFFFFF;
     box-shadow: 0px 0px 21px 0px rgba(183, 183, 183, 0.33);
     border-radius: 24px;
-    padding-top: 60px;
+    // padding-top: 60px; 
     box-sizing: border-box;
 
     div {