From b8a9a72f48278c86a3f87343280ce7c94b5e0643 Mon Sep 17 00:00:00 2001
From: bai <1643359946@qq.com>
Date: Wed, 8 Nov 2023 02:23:55 +0800
Subject: [PATCH] =?UTF-8?q?2023=E5=B9=B411=E6=9C=888=E6=97=A5=20=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D=E6=99=BA=E6=85=A7=E6=95=99=E5=AE=A4=E9=A1=B5=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/kc/jiaoshi/index.vue | 150 +++++++++++++++++++++++++--------
 1 file changed, 113 insertions(+), 37 deletions(-)

diff --git a/src/views/kc/jiaoshi/index.vue b/src/views/kc/jiaoshi/index.vue
index 87b476b..83342b3 100644
--- a/src/views/kc/jiaoshi/index.vue
+++ b/src/views/kc/jiaoshi/index.vue
@@ -55,7 +55,7 @@
           </a-card>
         </a-col>
         <a-col :span="12">
-          <a-card class="cardDiv" title="上课情况">
+          <a-card class="cardDiv" title="开放听课教室上课情况">
             <!-- -<i class="fa-sharp fa-solid fa-user"></i>- -->
             <a-row class="" :gutter="[16,16]">
               <a-col :span="8">
@@ -69,7 +69,7 @@
               </a-col>
               <a-col :span="8">
                 <div class="numberBlob handleCss" @click="openDetail({ onLineClassType: 'green' })">
-                  <div class="numSpan blue">{{ (leftList.filter(x => x?.nowIsClass && x?.child['教师近景']?.isOnLine).length || 0) }}</div>
+                  <div class="numSpan blue">{{ (leftList.filter(x => x.nowIsClass && x?.child['教师近景']?.isOnLine).length || 0) }}</div>
                   <div class="numberName">
                     <!-- <RiseOutlined class="orange"/> -->
                     正在直播
@@ -78,7 +78,7 @@
               </a-col>
               <a-col :span="8">
                 <div class="numberBlob handleCss" @click="openDetail({ onLineClassType: 'red' })">
-                  <div class="numSpan orange">{{ (leftList.filter(x => x?.nowIsClass && !x?.child['教师近景']?.isOnLine).length || 0) }}</div>
+                  <div class="numSpan orange">{{ (leftList.filter(x => x.nowIsClass && !x?.child['教师近景']?.isOnLine).length || 0) }}</div>
                   <div class="numberName">
                     <!-- <RiseOutlined class="orange"/> -->
                     直播异常
@@ -109,14 +109,14 @@
               <div class="bgshua" style="float: right"><a-button type="primary" @click="refreshLogsFn(item.jxlName)">设备检测</a-button></div>
             </template>
             <a-row style="margin-bottom: 10px;text-align: center;border-bottom: 1px #f0f0f0 solid ;padding-bottom: 10px;">
-              <a-col :span="6" style="font-weight: 600;" @click="openDetail({ jxlName: item.jxlName})">{{ item.jsNum }}</a-col>
-              <a-col :span="6" style="font-weight: 600;" @click="openDetail({ jxlName: item.jxlName, sfyx: '0'})">{{ item.child.length }}</a-col>
-              <a-col :span="6" style="font-weight: 600;" @click="openDetail({ jxlName: item.jxlName})">{{ item.child.filter(x => x.sfyx == 0).length || 0 }}</a-col>
-              <a-col :span="6" style="font-weight: 600;" v-if="!statusLogList.length">未检测</a-col>
-              <a-col :span="6" style="font-weight: 600;" v-else>{{ statusLogList.filter(x => x.jxlName == item.jxlName && x.type != 'green' ).length }}</a-col>
-              <a-col :span="6" @click="openDetail({ jxlName: item.jxlName})">总数</a-col>
-              <a-col :span="6" @click="openDetail({ jxlName: item.jxlName, sfyx: '0'})">可直播</a-col>
-              <a-col :span="6" @click="openDetail({ jxlName: item.jxlName })">开放听课</a-col>
+              <a-col class="hover handleCss" :span="6" style="font-weight: 600;" @click="openDetail({ jxlName: item.jxlName})"><span>{{ item.jsNum }}</span></a-col>
+              <a-col class="hover" :span="6" style="font-weight: 600;" @click="openDetail({ jxlName: item.jxlName, sfyx: '0'})"><span>{{ item.child.length }}</span></a-col>
+              <a-col class="hover" :span="6" style="font-weight: 600;" @click="openDetail({ jxlName: item.jxlName})"><span>{{ item.child.filter(x => x.sfyx == 0).length || 0 }}</span></a-col>
+              <a-col class="" :span="6" style="font-weight: 600;" v-if="!statusLogList.length"><span>未检测</span></a-col>
+              <a-col class="" :span="6" style="font-weight: 600;" v-else><span>{{ statusLogList.filter(x => x.jxlName == item.jxlName && x.type != 'green' ).length }}</span></a-col>
+              <a-col class="hover" :span="6" @click="openDetail({ jxlName: item.jxlName})"><span>总数</span></a-col>
+              <a-col class="hover" :span="6" @click="openDetail({ jxlName: item.jxlName, sfyx: '0'})"><span>可直播</span></a-col>
+              <a-col class="hover" :span="6" @click="openDetail({ jxlName: item.jxlName })"><span>开放听课</span></a-col>
               <a-col :span="6" >
                 <div>设备异常</div>
                 <!-- <div v-if="statusLogList.length" style="font-size: .5rem;">{{ statusLogList[0]?.createTime }}</div> -->
@@ -132,13 +132,13 @@
 
             </a-row>
             <a-row style="text-align: center;">
-              <a-col :span="8" style="font-weight: 600;" @click="openDetail({ jxlName: item.jxlName, nowIsClass: true})">{{ item.child.filter(x => x?.nowIsClass).length || 0}}</a-col>
-              <a-col :span="8" style="font-weight: 600;" @click="openDetail({ jxlName: item.jxlName, onLineClassType: 'green'})">{{ item.child.filter(x => x?.nowIsClass && x?.child['教师近景']?.isOnLine).length || 0}}</a-col>
-              <a-col :span="8" style="font-weight: 600;" @click="openDetail({ jxlName: item.jxlName, onLineClassType: 'red'})">{{ item.child.filter(x => x?.nowIsClass && !x?.child['教师近景']?.isOnLine).length || 0 }}</a-col>
+              <a-col class="hover" :span="8" style="font-weight: 600;" @click="openDetail({ jxlName: item.jxlName, nowIsClass: true})"><span>{{ item.child.filter(x => x?.nowIsClass).length || 0}}</span></a-col>
+              <a-col class="hover" :span="8" style="font-weight: 600;" @click="openDetail({ jxlName: item.jxlName, onLineClassType: 'green'})"><span>{{ item.child.filter(x => x?.nowIsClass && x?.child['教师近景']?.isOnLine).length || 0}}</span></a-col>
+              <a-col class="hover" :span="8" style="font-weight: 600;" @click="openDetail({ jxlName: item.jxlName, onLineClassType: 'red'})"><span>{{ item.child.filter(x => x?.nowIsClass && !x?.child['教师近景']?.isOnLine).length || 0 }}</span></a-col>
               <!-- <a-col :span="8" style="font-weight: 600;" >&nbsp;</a-col> -->
-              <a-col :span="8" @click="openDetail({ jxlName: item.jxlName, nowIsClass: true})">正在上课</a-col>
-              <a-col :span="8" @click="openDetail({ jxlName: item.jxlName, onLineClassType: 'green'})">正在直播</a-col>
-              <a-col :span="8" @click="openDetail({ jxlName: item.jxlName, onLineClassType: 'red'})">直播异常</a-col>
+              <a-col class="hover" :span="8" @click="openDetail({ jxlName: item.jxlName, nowIsClass: true})"><span>正在上课</span></a-col>
+              <a-col class="hover" :span="8" @click="openDetail({ jxlName: item.jxlName, onLineClassType: 'green'})"><span>正在直播</span></a-col>
+              <a-col class="hover" :span="8" @click="openDetail({ jxlName: item.jxlName, onLineClassType: 'red'})"><span>直播异常</span></a-col>
               <!-- <a-col :span="8" >&nbsp;</a-col> -->
             </a-row>
           </a-card>
@@ -258,15 +258,35 @@
             <a-form-item label="教学楼">
               <!-- <j-dict-select-tag placeholder="请选择教室" v-model:value="queryParam.xqxn" dictCode="kc_xqxn_history,title,title"/> -->
               <!-- <a-input placeholder="请输入" v-model:value="queryParam.jxlName"/> -->
-              <a-select placeholder="请选择" v-model:value="queryParam.jxlName">
+              <!-- <a-select placeholder="请选择" v-model:value="queryParam.jxlName">
                 <a-select-option :value="undefined">全部</a-select-option>
                 <a-select-option v-for="(jxl,jxlIndex) in cardList" :key="jxlIndex" :value="jxl.jxlName">{{jxl.jxlName}}</a-select-option>
+              </a-select> -->
+
+              <a-select
+                v-model:value="queryParam.jxlName"
+                allowClear
+                show-search
+                placeholder="请选择"
+                :options="cardList"
+                :filter-option="jxlNameFilterOptionFn"
+              >
               </a-select>
             </a-form-item>
           </a-col>
           <a-col :lg="5" style="padding: 0 10px 0 0;">
             <a-form-item label="教室">
-              <a-input placeholder="请输入" v-model:value="queryParam.jsmc"/>
+              <!-- <a-input placeholder="请输入" v-model:value="queryParam.jsmc"/> -->
+              <a-select
+                v-model:value="queryParam.jsmc"
+                allowClear
+                show-search
+                placeholder="请选择"
+                :options="thisOptions"
+                :filter-option="jxlNameFilterOptionFn"
+              >
+              </a-select>
+              <!-- -{{thisOptions}}- -->
             </a-form-item>
           </a-col>
           <a-col :lg="5" style="padding: 0 10px 0 0;">
@@ -320,11 +340,6 @@
               <a-button type="primary" preIcon="ant-design:search-outlined" @click="searchQuery">查询</a-button>
               <a-button type="primary" preIcon="ant-design:reload-outlined" @click="searchReset" style="margin-left: 8px">重置</a-button>
 
-              <a-button type="primary" :loading="loading" @click="batchLiveOpen" style="margin-left: 8px">批量打开直播</a-button>
-              <a-button type="primary" :loading="loading" @click="batchLiveClose" style="margin-left: 8px">批量关闭直播</a-button>
-              <a-button type="primary" :loading="loading" @click="batchTingkeOpen" style="margin-left: 8px">批量打开听课</a-button>
-              <a-button type="primary" :loading="loading" @click="batchTingkeClose" style="margin-left: 8px">批量关闭听课</a-button>
-
               <!-- <a-button type="primary" preIcon="ant-design:check-square-outlined" @click="closeQuartz" v-if="shangXianQuartz.status == 0" style="margin-left: 8px">停止自动调整教室</a-button> -->
               <!-- 永远开启 <a-button type="primary" preIcon="ant-design:border-outlined" @click="openQuartz" v-if="shangXianQuartz.status == -1" style="margin-left: 8px">开启自动调整教室</a-button> -->
               <!--<a @click="toggleSearchStatus = !toggleSearchStatus" style="margin-left: 8px">
@@ -336,6 +351,18 @@
         </a-row>
       </a-form>
     </div>
+    <div class="jeecg-basic-table-form-container">
+      <a-row :gutter="24">
+          <a-col :lg="24" style="padding: 10px 50px 10px 10px;">
+            <div style="float: right;">
+              <a-button type="primary" :loading="btnLoading" @click="batchLiveOpen" style="margin-left: 8px">批量打开直播</a-button>
+              <a-button type="primary" :loading="btnLoading" @click="batchLiveClose" style="margin-left: 8px">批量关闭直播</a-button>
+              <a-button type="primary" :loading="btnLoading" @click="batchTingkeOpen" style="margin-left: 8px">批量打开听课</a-button>
+              <a-button type="primary" :loading="btnLoading" @click="batchTingkeClose" style="margin-left: 8px">批量关闭听课</a-button>
+            </div>
+          </a-col>
+      </a-row>
+    </div>
 
     <a-table
       rowKey="jsbh"
@@ -480,6 +507,7 @@ const allClassNum:Ref<any> = ref(0);
 const showAllLiveKey:Ref<string> = ref('showAllLiveKey');
 const isShowAllLive:Ref<boolean> = ref(false);
 const loading:Ref<boolean> = ref(false);
+const btnLoading:Ref<boolean> = ref(false);
 const twoShowType:Ref<boolean> = ref(true);
 const { createMessage, createInfoModal, createErrorModal } = useMessage();
 const route = useRouter();
@@ -491,15 +519,31 @@ const onLineTitle:Ref<any> = ref({
   'red':'设备异常',
 });
 
-onMounted(() => {
-  loadData();
-});
+// onMounted(() => {
+//   loadData();
+// });
 
 const filterComputedDataSource:Ref<any> = ref([]);
 
 // const filterComputedDataSource = computed(() => {
 //   return filterDataSource();
 // });
+const thisOptions = computed(() => {
+  console.log('',queryParam.value.jxlName,);
+
+  if(queryParam.value.jxlName){
+    let index = cardList.value.findIndex(x => x.jxlName == queryParam.value.jxlName);
+
+    console.log(`🚀 ------------------------------------------------------🚀`);
+    console.log(`🚀 ~ file: index.vue:536 ~ thisOptions ~ index:`, index,cardList);
+    console.log(`🚀 ------------------------------------------------------🚀`);
+
+    if(index != -1){
+      return cardList.value[index]?.child??[];
+    }
+  }
+  return [];
+})
 
 enum Api {
   list = '/jiaoshi/kcZhihuijiaoshi/list',
@@ -581,6 +625,8 @@ function loadData(){
     let map = {};
     let jxlMap = {};
     list.forEach(x => {
+      // x.nowIsClass = true //debug
+
       x.zbgn = 0;
       let item = map[x.jsmc];
       x.isOnLine = false;
@@ -591,7 +637,9 @@ function loadData(){
         child[x.xm] = x;
         map[x.jsmc] = {
           ...x,
-          child
+          child,
+          value: x.jsmc,
+          label: x.jsmc,
         };
         item = map[x.jsmc];
       }
@@ -601,22 +649,29 @@ function loadData(){
     let changeAllList = () => {
       leftList.value.forEach(x => {
         let item = jxlMap[x.jxlId];
+        getIsOnLineClass(x);
         if(item){
           item.child.push(x);
         }else{
           let child = [x];
           jxlMap[x.jxlId] = {
             ...x,
-            child
+            child,
+            value: x.jxlName,
+            label: x.jxlName,
           };
           item = jxlMap[x.jxlId];
         }
+        //提前执行一遍，为了数量
+        //console.log('getIsOnLineClass(item) -> ',getIsOnLineClass(item));
       });
       cardList.value = Object.values(jxlMap);
       filterComputedDataSource.value = filterDataSource();
 
       loading.value = false;
       indexDetailRef.value.changeLoadDataLoading(false);
+      console.log('leftList ->',leftList);
+
     }
 
 
@@ -630,14 +685,17 @@ function loadData(){
         });
       });
       Promise.all(getListAction).then(resList => {
-        console.log(`🚀 ~ file: index.vue:104 ~ Promise.all ~ ress:`, resList);
+        console.log(`🚀 ~ file: index.vue:685 ~ Promise.all ~ ress:`, resList);
         // loading.value = false;
         //queryParam.value._ = resList;
-        changeAllList();
+        //changeAllList();
       }).catch((e) => {
-        console.error(e);
-        changeAllList();
+        console.error(`🚀 ~ file: index.vue:690 ~ Promise.all Error ~ ress:`, e);
+        //changeAllList();
         // loading.value = false;
+      }).finally((...d) => {
+        console.log("正常执行！",...d);
+        changeAllList();
       });
     });
 
@@ -662,6 +720,13 @@ function openDetail(param){
   // indexDetailRef.value.changeQueryParam(param);
 }
 
+function jxlNameFilterOptionFn(input: string, option: any){
+  console.log(input, option);
+
+  return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0;
+  // return true;
+}
+
 function getJsjbxxList(){
   jsjbxxList({ pageSize: -1, changshang: '奥威亚',...queryParam.value }).then(res => {
     let list = (res?.records) ?? [];
@@ -741,7 +806,7 @@ function onSelectChange2(key,selectedRowKeyList: string | number[]){
   // console.log(`🚀 ------------------------------------------------------------------------------------🚀`);
   // console.log(`🚀 ~ file: index.vue:741 ~ onSelectChange2 ~ selectedRowKeyList:`, selectedRowKeyList,...d);
   // console.log(`🚀 ------------------------------------------------------------------------------------🚀`);
-  let c = selectedRowKeyList[0]
+  // let c = selectedRowKeyList[0]
   let index = cardList.value.findIndex(x => x.jsbh == key);
   currentCardIndex.value = index
   searchReset()
@@ -772,7 +837,7 @@ function batchLive(type: boolean){
   if(checkSelectValue()) return;
   let changeList = getSelectData((x) => x?.child['教师全景']?.isOnLine == !type);
   if(checkIsList(changeList)) return;
-  loading.value = true;
+  btnLoading.value = true;
   //调用接口
   let ids:any = [];
   let isEnable = type;
@@ -806,7 +871,7 @@ function batchLive(type: boolean){
 
   }).catch(e => {
     console.error(e);
-    loading.value = false;
+    btnLoading.value = false;
     createInfoModal({title: '错误结果',content:e})
   })
 }
@@ -815,6 +880,7 @@ function batchTingke(type: boolean){
   if(checkSelectValue()) return;
   let changeList = getSelectData((x) => x?.sfyx == type?1:0);
   if(checkIsList(changeList)) return;
+  btnLoading.value = true;
   //调用接口
   let ids:any = [];
   changeList.forEach(record => Object.values(record.child).forEach(x => {
@@ -827,7 +893,7 @@ function batchTingke(type: boolean){
     loadData();
   }).catch(e => {
     console.error(e);
-    loading.value = false;
+    btnLoading.value = false;
   });
 }
 
@@ -1116,7 +1182,17 @@ video::-webkit-media-controls-timeline {
 }
 .handleCss{
   cursor:pointer;
+  // :hover {
+  //   color: red;
+  // }
 }
+
+.hover :hover{
+  color:#1c84c6;
+  //font-size: 1.1rem;
+  font-weight: bold;
+}
+
 .iconel{
   float: left;
   width: 50px;