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

src/api/account.js

@@ -45,3 +45,7 @@ export function upholdinfo(data) {
 export function getCountryinfo(data) {
     return postAxios({ url: 'api/tkinfo/countryinfo', data })
 }
+//查看名字
+export function accountName(str) {
+    return postAxios({ url: 'api/account/accountName?accounts=' + str })
+}

src/utils/axios.js

@@ -16,9 +16,9 @@ const router = useRouter();
 let baseURL = ''
 if (process.env.NODE_ENV === 'development') {
     // 生产环境
-    // baseURL = "http://api.tkpage.vvtiktok.cn"
+    baseURL = "http://api.tkpage.vvtiktok.cn"
     // baseURL = "http://120.26.251.180:8085/"
-    baseURL = "http://192.168.0.111:8085/"
+    // baseURL = "http://192.168.0.103:8085/"
 } else {
     // 测试环境
     // baseURL = "http://120.26.251.180:8085/"
@@ -97,8 +97,8 @@ export function postAxios({ url, data }) {
 
             } else {
                 console.log(err)
-                ElMessage.error('报错啦');
-                reject(err)
+                ElMessage.error('报错啦' + err.response.status);
+                // reject(err)
 
 
             }

src/views/hosts/hostsList.vue

@@ -2,12 +2,23 @@
   <div class="hostList">
     <div>
       <div style="display: flex;">
-        <el-select v-model="searchForm.country" filterable placeholder="选择国家" size="large" style="width: 240px">
+        <el-select v-model="searchForm.country" filterable placeholder="选择国家" size="large" style="width: 160px">
           <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;" />
+          style="margin-left: 50px;width: 160px;" />
+
+        <el-input v-model="searchForm.hostId" placeholder="请输入主播id" size="large"
+          style="width: 160px; margin-left: 50px;" clearable />
+
+        <el-select v-if="userInfo.userType == 3" v-model="searchForm.belongYn" filterable placeholder="分配情况"
+          style="width: 120px; margin-left: 50px;">
+          <el-option
+            v-for="item in [{ label: '全部', value: '' }, { label: '未分配', value: '0' }, { label: '已分配', value: '1' }]"
+            :key="item.value" :label="item.label" :value="item.value" />
+        </el-select>
 
         <el-button class="serch-button" style="margin-left: 50px;" type="primary" @click="serch">查询</el-button>
         <el-button class="put-button" :disabled="tableData.length == 0" type="primary"
@@ -35,6 +46,28 @@
               {{ scope.row.hostName }}
             </template>
           </el-table-column> -->
+          <el-table-column v-if="userInfo.userType == 3" prop="belongBy" label="分配情况" width="120">
+            <template #default="scope">
+              <el-popover v-if="scope.row.belongBy" placement="bottom" :width="200" trigger="hover"
+                @show="openAccountName(scope.row.belongBy)">
+                <template #reference>
+                  <!-- <div @click="openAccountName(scope.row.belongBy)"> -->
+                  <div style="color: green;">
+                    {{ scope.row.belongBy == null || scope.row.belongBy == '' ? "未分配" : "已分配" }}
+                  </div>
+                </template>
+                <div v-for="str in staffId" :key="str">
+                  {{ str }}
+                </div>
+                <!-- <el-table :data="gridData">
+                  <el-table-column width="150" property="date" label="date" />
+                  <el-table-column width="100" property="name" label="name" />
+                </el-table> -->
+              </el-popover>
+              <div v-show="!scope.row.belongBy">未分配</div>
+
+            </template>
+          </el-table-column>
           <el-table-column prop="hostlevel" label="等级" width="120">
             <template #default="scope">
               {{ scope.row.hostlevel }}
@@ -147,37 +180,77 @@
       </template>
     </el-dialog>
 
+    <!-- <el-dialog v-model="hostNameVisible" title="分配情况" align-center>
+      {{ staffId }}
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button type="primary" @click="hostNameVisible = false">
+            确定
+          </el-button>
+        </span>
+      </template>
+    </el-dialog> -->
 
     <el-dialog v-model="filterdialogVisible" width="800px" :before-close="handleClose">
-      <el-row :gutter="20">
-        <el-col :span="8">
-          <label>选择筛选条件</label>
-          <el-select v-model="searchForm.dataType" filterable placeholder="筛选条件" style="width: 240px">
-            <el-option v-for="item in filterOptions" :key="item.value" :label="item.label" :value="item.value" />
-          </el-select>
+      <el-row :gutter="20" v-for="item in filterOptions" :key="item.type">
+        <el-col :span="4">
+          <!-- <label>选择筛选条件</label> -->
+          <div style="height: 100%;padding-top: 10px;" class="center-justify">
+            {{ item.label }}
+          </div>
+
         </el-col>
-        <el-col :span="8">
-          <div v-if="!(searchForm.dataType == 'InvitationType')"><label>最小值</label></div>
+        <el-col :span="10">
+          <div v-if="!(item.type == 'InvitationType')"><label>最小值</label></div>
           <div v-else><label>普票/金票</label></div>
 
-          <el-input v-show="!(searchForm.dataType == 'InvitationType')" type="number" v-model="searchForm.dataStart"
-            placeholder="请输入最小值" />
-          <el-select v-show="(searchForm.dataType == 'InvitationType')" v-model="searchForm.dataStart" filterable
-            placeholder="请选择" style="width: 240px">
-            <el-option v-for="item in [{ label: '普票', value: '1' }, { label: '金票', value: '2' }]" :key="item.value"
-              :label="item.label" :value="item.value" />
+          <el-input v-show="!(item.type == 'InvitationType')" oninput="if(value.length>10)value=value.slice(0,10)"
+            type="number" v-model.number="item.dataStart" placeholder="请输入最小值" />
+          <el-select v-show="(item.type == 'InvitationType')" v-model="item.dataStart" filterable placeholder="请选择"
+            style="width: 240px">
+            <el-option
+              v-for="item in [{ label: '全部', value: '' }, { label: '普票', value: '1' }, { label: '金票', value: '2' }]"
+              :key="item.value" :label="item.label" :value="item.value" />
+          </el-select>
+
+        </el-col>
+        <el-col :span="10">
+          <div v-show="!(item.type == 'InvitationType')"><label>最大值</label></div>
+
+          <el-input v-show="!(item.type == 'InvitationType')" oninput="if(value.length>10)value=value.slice(0,10)"
+            type="number" v-model.number="item.dataEnd" placeholder="请输入最大值" />
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="4">
+          <!-- <label>选择筛选条件</label> -->
+          <div style="height: 100%;padding-top: 10px;" class="center-justify">
+            排序
+          </div>
+
+        </el-col>
+        <el-col :span="10">
+          <div><label>排序类型</label></div>
+
+
+          <el-select v-model="sortData.sortType" filterable placeholder="请选择" style="width: 240px">
+            <el-option v-for="item in filterOptions" :key="item.value" :label="item.label" :value="item.type" />
           </el-select>
         </el-col>
-        <el-col :span="8">
-          <div v-show="!(searchForm.dataType == 'InvitationType')"><label>最大值</label></div>
+        <el-col :span="10">
+          <div><label>升序/降序</label></div>
 
-          <el-input v-show="!(searchForm.dataType == 'InvitationType')" type="number" v-model="searchForm.dataEnd"
-            placeholder="请输入最大值" />
+          <el-select v-model="sortData.sortForm" filterable placeholder="请选择" style="width: 240px">
+            <el-option v-for="item in [{ label: '升序', value: 'asc' }, { label: '降序', value: 'desc' }]" :key="item.value"
+              :label="item.label" :value="item.value" />
+          </el-select>
         </el-col>
       </el-row>
 
       <template #footer>
         <span class="dialog-footer">
+
           <!-- <el-button @click="filterdialogVisible = false">取消</el-button> -->
           <el-button type="primary" @click="handelClick">
             确认
@@ -193,7 +266,7 @@
 
 <script setup>
 // import { getToken, setToken, removeToken } from '@/utils/storage'
-import { tkhostdata, dicts, tkhostdetail, downList, getStaffList, managerhosts, upholdinfo, getCountryinfo } from '@/api/account';
+import { tkhostdata, dicts, tkhostdetail, downList, getStaffList, managerhosts, upholdinfo, getCountryinfo, accountName } from '@/api/account';
 import { usePythonBridge, } from '@/utils/pythonBridge'
 import { getUser, setSerch, getSerch } from '@/utils/storage'
 import { ref, reactive, onMounted } from 'vue';
@@ -213,8 +286,10 @@ const multipleTableRef = ref(null)
 
 let labelList = ref([])
 const tableData = ref([])
-//选择国家
+//主播列表传参
 const searchForm = ref({
+  hostId: '',
+  belongYn: '',
   country: '',
   // time: new Date().toISOString().split('T')[0].replace(/-/g, ''),
   time: '',
@@ -222,7 +297,8 @@ const searchForm = ref({
   dataStart: '',
   dataEnd: '',
 })
-
+//排序
+let sortData = ref({ sortForm: 'desc', sortType: 'hostcoins' })
 //员工选择列表
 let staffOptions = ref([])
 //筛选条件选择列表
@@ -233,11 +309,15 @@ let staffValue = ref('')
 let selectHostList = ref([])
 //分配弹窗是否弹出
 let dialogFormVisible = ref(false)
+//分配情况弹窗是否弹出
+let hostNameVisible = ref(false)
+
 //备注弹窗是否弹出
 let commentVisible = ref(false)
 //筛选弹窗是否弹出
 let filterdialogVisible = ref(false)
-
+//分配的员工
+let staffId = ref({})
 //备注信息
 let commentInfo = ref('')
 //备注信息主播
@@ -277,11 +357,22 @@ function exportList() {
     searchForm.value.dataEnd = searchForm.value.dataStart
   }
   exportToExcel({
+    hostId: searchForm.value.hostId == '' ? null : searchForm.value.hostId,
+    belongYn: searchForm.value.belongYn == '' ? null : searchForm.value.belongYn,
     searchTime: searchForm.value.time == '' ? null : searchForm.value.time,
     region: searchForm.value.country == '' ? null : searchForm.value.country,
-    dataType: searchForm.value.dataType == '' ? null : searchForm.value.dataType,
-    dataStart: searchForm.value.dataStart == '' ? null : searchForm.value.dataStart,
-    dataEnd: searchForm.value.dataEnd == '' ? null : searchForm.value.dataEnd,
+    sortType: sortData.value.sortType,
+    sortForm: sortData.value.sortForm,
+    conditions: filterOptions.value.map(option => {
+      return {
+        ...option,
+        dataEnd: option.dataEnd == '' ? null : option.dataEnd,
+        dataStart: option.dataStart == '' ? null : option.dataStart
+      };
+    }),
+    // dataType: searchForm.value.dataType == '' ? null : searchForm.value.dataType,
+    // dataStart: searchForm.value.dataStart == '' ? null : searchForm.value.dataStart,
+    // dataEnd: searchForm.value.dataEnd == '' ? null : searchForm.value.dataEnd,
     pageSize: pageSize.value,
     page: page.value,
     userId: userInfo.value.userId,
@@ -317,6 +408,7 @@ function handleCurrentChange(val) {
 //选择行
 function handleSelectionChange(data) {
   console.log(data)
+  selectHostList.value = []
   data.forEach(item => {
     selectHostList.value.push(item.hostId)
   })
@@ -335,11 +427,22 @@ const getlist = () => {
   loading.value = true
   console.log(searchForm.value)
   tkhostdata({
+    hostId: searchForm.value.hostId == '' ? null : searchForm.value.hostId,
+    belongYn: searchForm.value.belongYn == '' ? null : searchForm.value.belongYn,
     searchTime: searchForm.value.time == '' ? null : searchForm.value.time,
     region: searchForm.value.country == '' ? null : searchForm.value.country,
-    dataType: searchForm.value.dataType == '' ? null : searchForm.value.dataType,
-    dataStart: searchForm.value.dataStart == '' ? null : searchForm.value.dataStart,
-    dataEnd: searchForm.value.dataEnd == '' ? null : searchForm.value.dataEnd,
+    sortType: sortData.value.sortType,
+    sortForm: sortData.value.sortForm,
+    conditions: filterOptions.value.map(option => {
+      return {
+        ...option,
+        dataEnd: option.dataEnd == '' ? null : option.dataEnd,
+        dataStart: option.dataStart == '' ? null : option.dataStart
+      };
+    }),
+    // dataType: searchForm.value.dataType == '' ? null : searchForm.value.dataType,
+    // dataStart: searchForm.value.dataStart == '' ? null : searchForm.value.dataStart,
+    // dataEnd: searchForm.value.dataEnd == '' ? null : searchForm.value.dataEnd,
     pageSize: pageSize.value,
     page: page.value,
     userId: userInfo.value.userId,
@@ -363,25 +466,34 @@ const getlist = () => {
 
 }
 function handelClick() {
-  setSerch({ dataType: searchForm.value.dataType, dataStart: searchForm.value.dataStart, dataEnd: searchForm.value.dataEnd })
+
+  filterOptions.value.forEach(item => {
+    if (item.type == 'InvitationType') {
+      item.dataEnd = item.dataStart
+    }
+  })
+
+
+
+  setSerch(filterOptions.value)
+  console.log(filterOptions.value)
   filterdialogVisible.value = false
 }
 
 function handleClose(done) {
   console.log('关闭')
-  searchForm.value = {
-    dataType: '',
-    dataStart: '',
-    dataEnd: '',
-  }
+  // searchForm.value = {
+  //   dataType: '',
+  //   dataStart: '',
+  //   dataEnd: '',
+  // }
   done()
 }
 
 function getSerchStorage() {
   if (getSerch()) {
-    searchForm.value.dataType = getSerch().dataType
-    searchForm.value.dataStart = getSerch().dataStart
-    searchForm.value.dataEnd = getSerch().dataEnd
+    // filterOptions.value = getSerch()
+
   }
 
 }
@@ -431,11 +543,17 @@ const getdictionary = () => {
     // labelList.value = res.records
     labelList.value = res
     console.log(labelList.value)
+
     labelList.value.forEach(item => {
-      filterOptions.value.push({
-        value: item.paramCode,
-        label: item.paramCodeMeaning
-      })
+      if (item.paramCodeMeaning != '获取时间') {
+        filterOptions.value.push({
+          type: item.paramCode,
+          label: item.paramCodeMeaning,
+          dataStart: '',
+          dataEnd: ''
+        })
+      }
+
     })
 
   })
@@ -531,13 +649,24 @@ function openHTML(id) {
   })
 
 }
+
+function openAccountName(idStr) {
+  if (idStr) {
+    hostNameVisible.value = true
+    accountName(idStr).then(res => {
+      staffId.value = JSON.stringify(res).replace(/[{}"]/g, '') // 移除所有 {} 和 "
+        .split(',')            // 按逗号分割成数组
+
+      console.log(res)
+    })
+  }
+}
 </script>
 
 <style lang="less">
 .hostList {
   box-sizing: border-box;
   // height: 100vh;
-  width: 100%;
   padding: 40px;
 
   /* 页面无法选中 */

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 {