优化代码

src/views/hosts/hostsList.vue

@@ -17,7 +17,7 @@
           size="large"
           style="width: 180px"
           type="number"
-          :disabled = "streamdialogVisibletext || isRunnings"
+          :disabled="streamdialogVisibletext || isRunnings"
         />
 
         <el-input
@@ -27,7 +27,7 @@
           style="width: 180px"
           class="right-input"
           type="number"
-          :disabled = "streamdialogVisibletext || isRunnings"
+          :disabled="streamdialogVisibletext || isRunnings"
         />
 
         <el-input
@@ -37,7 +37,7 @@
           style="width: 180px"
           class="right-input"
           type="number"
-          :disabled = "streamdialogVisibletext || isRunnings"
+          :disabled="streamdialogVisibletext || isRunnings"
         />
 
         <el-input
@@ -47,7 +47,7 @@
           style="width: 180px"
           class="right-input"
           type="number"
-          :disabled = "streamdialogVisibletext || isRunnings"
+          :disabled="streamdialogVisibletext || isRunnings"
         />
 
         <el-button
@@ -56,7 +56,9 @@
           class="put-button buttoMore-filters Specify"
           type="primary"
         >
-          <div>{{ streamdialogVisibletext ? '已指定直播间' : '指定直播间' }}</div></el-button
+          <div>
+            {{ streamdialogVisibletext ? "已指定直播间" : "指定直播间" }}
+          </div></el-button
         >
 
         <div
@@ -152,9 +154,14 @@
         >
           当前网络：{{ countryData }}
         </div>
-        <div class="right-input right-text" style="width: auto; height: 50px; line-height: 50px">
+        <div
-      运行时间：{{ String(hourstuo).padStart(2, '0') }}:{{ String(minutestuo).padStart(2, '0') }}:{{ String(secondstuo).padStart(2, '0') }}
+          class="right-input right-text"
-    </div>
+          style="width: auto; height: 50px; line-height: 50px"
+        >
+          运行时间：{{ String(hourstuo).padStart(2, "0") }}:{{
+            String(minutestuo).padStart(2, "0")
+          }}:{{ String(secondstuo).padStart(2, "0") }}
+        </div>
       </div>
       <!-- ····················································································································· -->
       <div class="hostTable center-justify">
@@ -177,6 +184,23 @@
             </template>
           </el-table-column>
 
+          <!-- <el-table-column
+            prop="hostDisplayId"
+            label="所在直播间主播id"
+            :width="screenWidth"
+          > -->
+          <!-- @click="openhostDisplayId(scope.row.hostDisplayId)" -->
+            <!-- <template #default="scope">
+              <div
+                class="hostIdText"
+                @mousedown="handleLongPress(scope.row.hostDisplayId)"
+                @mouseup="resetTimer"
+              >
+                {{ scope.row.hostDisplayId }}
+              </div>
+            </template>
+          </el-table-column> -->
+
           <el-table-column
             v-for="label in labelList"
             :key="label.paramCode"
@@ -319,9 +343,15 @@
             @input="handleInput"
           />
           <div class="specify-footer">
-            <el-button class="specify-button" @click="specifyCancel">取消指定直播间</el-button>
+            <el-button class="specify-button" @click="specifyCancel"
-            <el-button class="specify-button" type="primary" @click="specifyreset"> 重置 </el-button>
+              >取消指定直播间</el-button
-            <el-button class="specify-button" type="primary" @click="specifyClick"> 确认 </el-button>
+            >
+            <el-button class="specify-button" type="primary" @click="specifyreset">
+              重置
+            </el-button>
+            <el-button class="specify-button" type="primary" @click="specifyClick">
+              确认
+            </el-button>
           </div>
         </div>
       </el-dialog>
@@ -354,7 +384,17 @@ import { color } from "echarts";
 import { getCountryName } from "@/utils/countryUtil";
 import { ElLoading } from "element-plus";
 
-
+let longPressTimer = ref(null);
+//长按进入直播间
+function handleLongPress(event) {
+  longPressTimer = setTimeout(() => {
+    openhostDisplayId(event);
+  }, 500);
+}
+//长按结束
+function resetTimer() {
+  clearTimeout(longPressTimer);
+}
 //复制单元格内容
 function handleCellDbClick(row, column, cell, event) {
   const text = cell?.textContent?.trim();
@@ -380,25 +420,22 @@ async function copyToClipboard(text) {
       });
       return;
     }
-    
     // 备用方法：使用document.execCommand
-    const textarea = document.createElement('textarea');
+    const textarea = document.createElement("textarea");
     textarea.value = text;
     document.body.appendChild(textarea);
     textarea.select();
-    
+    if (document.execCommand("copy")) {
-    if (document.execCommand('copy')) {
       ElMessage({
-        type: "success", 
+        type: "success",
         message: "复制成功",
       });
     } else {
-      throw new Error('execCommand failed');
+      throw new Error("execCommand failed");
     }
-    
     document.body.removeChild(textarea);
   } catch (err) {
-    console.error('复制失败:', err);
+    console.error("复制失败:", err);
     ElMessage({
       type: "error",
       message: "复制失败",
@@ -406,7 +443,6 @@ async function copyToClipboard(text) {
   }
 }
 
-
 //ip国家
 let countryData = ref("");
 //获取屏幕宽度
@@ -501,8 +537,7 @@ function specifyClick() {
     });
     return;
   }
-  setStorageStreamId(textarea.value).then((res) => {
+  setStorageStreamId(textarea.value).then((res) => {});
-  });
   queryFormData.value.anchor_ids = textarea.value.split("\n");
   streamdialogVisible.value = false;
   streamdialogVisibletext.value = true;
@@ -512,13 +547,13 @@ function specifyClick() {
 function specifyreset() {
   textarea.value = "";
   streamdialogVisibletext.value = false;
-  queryFormData.value.anchor_ids = []
+  queryFormData.value.anchor_ids = [];
 }
 //指定直播间取消
 function specifyCancel() {
   streamdialogVisible.value = false;
   streamdialogVisibletext.value = false;
-  queryFormData.value.anchor_ids = []
+  queryFormData.value.anchor_ids = [];
 }
 //输入框input
 function handleInput() {
@@ -536,7 +571,12 @@ function getBigBrother() {
   queryFormData.value.region = countryData.value;
   startTimerfun();
   isRunnings.value = true;
-  if (queryFormData.value.anchor_ids == [] || queryFormData.value.anchor_ids == null || queryFormData.value.anchor_ids == undefined || queryFormData.value.anchor_ids.length == "") {
+  if (
+    queryFormData.value.anchor_ids == [] ||
+    queryFormData.value.anchor_ids == null ||
+    queryFormData.value.anchor_ids == undefined ||
+    queryFormData.value.anchor_ids.length == ""
+  ) {
     controlTask(JSON.stringify(queryFormData.value)).then((res) => {
       queryFormData.value.isRunning = false;
       timerId.value = setInterval(() => {
@@ -569,7 +609,7 @@ const {
   getBrotherInfo,
   Specifystreaming,
   setStorageStreamId,
-  getStorageStreamId
+  getStorageStreamId,
 } = usePythonBridge();
 
 let num = ref(0);
@@ -620,6 +660,8 @@ let streamdialogVisible = ref(false);
 let textarea = ref("");
 //计时器
 let startTime = ref(null);
+//筛选弹窗
+let filterdialogVisible = ref(false);
 //分配的员工
 let staffId = ref({});
 //备注信息
@@ -635,8 +677,11 @@ let options = ref([]);
 
 let version = ref("0.0.0");
 
+const lastVisibleTime = ref(null);
+
 onMounted(() => {
   window.addEventListener("resize", handleResize);
+  window.addEventListener("visibilitychange", handleVisibilityChange);
   setTimeout(() => {
     getUserdata();
     getStorageStreamId(1).then((res) => {
@@ -645,6 +690,31 @@ onMounted(() => {
   }, 500);
 });
 
+onBeforeUnmount(() => {
+  window.removeEventListener("resize", handleResize);
+  window.removeEventListener("visibilitychange", handleVisibilityChange);
+});
+
+function handleVisibilityChange() {
+  if (isRunnings.value) {
+    if (document.hidden) {
+      // 页面变为不可见
+      lastVisibleTime.value = Date.now();
+      stopTimerfun();
+    } else {
+      // 页面重新可见
+      if (lastVisibleTime.value) {
+        const hiddenDuration = Math.floor((Date.now() - lastVisibleTime.value) / 1000);
+        secondstuo.value += hiddenDuration % 60;
+        minutestuo.value += Math.floor(hiddenDuration / 60) % 60;
+        hourstuo.value += Math.floor(hiddenDuration / 3600);
+      }
+
+      startTimerfun();
+    }
+  }
+}
+
 // 启动计时器
 function startTimerfun() {
   startTime.value = setInterval(() => {
@@ -660,13 +730,11 @@ function startTimerfun() {
   }, 1000);
 }
 
-
 // 停止计时器
 function stopTimerfun() {
   clearInterval(startTime.value);
 }
 
-
 //表格单元格长度判断
 function handleResize() {
   screenWidth.value = window.innerWidth / 11;
@@ -807,6 +875,9 @@ function openHTML(id) {
 
   givePyAnchorId(id);
 }
+function openhostDisplayId(hostDisplayId) {
+  givePyAnchorId(hostDisplayId);
+}
 </script>
 
 <style lang="less">
@@ -919,13 +990,13 @@ function openHTML(id) {
 .specify-dialog {
   height: 400px;
 }
-.specify-footer{
+.specify-footer {
   width: 100%;
   display: flex;
-  justify-content:space-around;
+  justify-content: space-around;
   margin-top: 20px;
 }
-.specify-button{
+.specify-button {
   width: 200px;
   height: 50px;
 }