展开收起当前机场

Web/src/api/custom/index.ts

@@ -3,6 +3,7 @@ import { getWorkspaceId } from '/@/utils/index';
 
 // Api参数类型
 export type FetchJobListApiParams = Partial<{
+    snList: string,
     begin_time: number,
     end_time: number,
     search_info: string,

Web/src/pages/page-web/projects/task/taskList/components/Search.vue

@@ -1,7 +1,12 @@
 <template>
   <a-row style="margin-bottom: 20px;" justify="space-between">
     <a-col>
-      <a-button type="primary">
+      <a-tooltip title="展开收起当前机场">
+        <a-button type="primary" style="margin-right: 10px;" @click="onClickCollapsed">
+          <MenuOutlined />
+        </a-button>
+      </a-tooltip>
+      <a-button type="primary" @click="onClickCreateTask">
         新建机场任务
       </a-button>
     </a-col>
@@ -33,10 +38,12 @@
 
 <script lang="ts" setup>
 import { ref, reactive } from 'vue';
-import { SearchOutlined, ReloadOutlined } from '@ant-design/icons-vue';
+import { MenuOutlined, SearchOutlined, ReloadOutlined } from '@ant-design/icons-vue';
 import moment from 'moment';
 
 interface Props {
+  onClickCollapsed: () => void,
+  onClickCreateTask: () => void,
   onClickSearch: (query: any) => Promise<any>,
   onClickReset: (query: any) => Promise<any>,
 };

Web/src/pages/page-web/projects/task/taskList/index.vue

@@ -1,12 +1,27 @@
 <template>
   <div class="taskList">
-    <div class="taskList-left">
+    <div class="taskList-left" v-if="state.collapsed">
+      <div class="taskList-left-title">
+        <div>
+          当前机场
+        </div>
+        <a-checkbox v-model:checked="checkState.checkAll" :indeterminate="checkState.indeterminate"
+          @change="onCheckAllChange">
+          全选
+        </a-checkbox>
+      </div>
       <div v-for="(dock, index) in state.onlineDockList" :key="dock.sn">
-        <Airport :dock="dock" :look-info="false" />
+        <div :class="[
+          'taskList-left-item',
+          checkState.checkSnList.includes(dock.sn) ? 'taskList-left-item-selected' : ''
+        ]" @click="onClickCheckItem(dock.sn)">
+          <Airport :dock="dock" :look-info="false" />
+        </div>
       </div>
     </div>
-    <div class="taskList-right">
-      <Search :onClickSearch="onClickSearch" :onClickReset="onClickReset" />
+    <div :style="{ width: state.collapsed ? 'calc(100% - 250px)' : '100%' }">
+      <Search :onClickCollapsed="() => { state.collapsed = !state.collapsed }" :onClickCreateTask="() => { }"
+        :onClickSearch="onClickSearch" :onClickReset="onClickReset" />
       <a-table :scroll="{ x: '100%', y: 500 }" rowKey="job_id" :loading="state.listLoading" :columns="columns"
         :dataSource="state.list" @change="refreshData" :rowClassName="rowClassName" :pagination="paginationConfig">
         <!-- 计划｜实际时间 -->
@@ -95,6 +110,7 @@ import { OnlineDevice, EModeCode } from '/@/types/device'
 import { EDeviceTypeName } from '/@/types'
 
 interface State {
+  collapsed: boolean,
   onlineDockList: OnlineDevice[],
   query: any,
   listLoading: boolean,
@@ -102,12 +118,24 @@ interface State {
 };
 
 const state: State = reactive({
+  collapsed: true,
   onlineDockList: [],
   query: undefined,
   listLoading: false,
   list: [],
 });
 
+const checkState = reactive({
+  checkAll: false as boolean,
+  indeterminate: false as boolean,
+  checkSnList: [] as string[],
+});
+
+watch(() => checkState.checkSnList, val => {
+  checkState.indeterminate = !!val.length && val.length < state.onlineDockList.length;
+  checkState.checkAll = val.length === state.onlineDockList.length;
+}, { deep: true });
+
 const store = useMyStore();
 const { formatMediaTaskStatus } = useFormatTask();
 
@@ -156,6 +184,8 @@ const fetchOnlineDock = async () => {
     }
   })
   state.onlineDockList = list;
+  checkState.checkAll = true;
+  checkState.checkSnList = list.map(item => item.sn);
 }
 
 const fetchList = async () => {
@@ -163,6 +193,7 @@ const fetchList = async () => {
   try {
     const res = await apis.fetchJobList({
       ...state.query,
+      snList: checkState.checkSnList.join(','),
       page: paginationConfig.current,
       page_size: paginationConfig.pageSize
     });
@@ -207,19 +238,38 @@ function getOnlineDeviceHms() {
 onMounted(async () => {
   await fetchOnlineDock();
   setTimeout(() => {
-    watch(() => store.state.deviceStatusEvent,
-      async data => {
-        await fetchOnlineDock()
-        if (data.deviceOnline.sn) {
-          getUnreadHms(data.deviceOnline.sn)
-        }
-      }, { deep: true }
-    )
+    watch(() => store.state.deviceStatusEvent, async data => {
+      await fetchOnlineDock()
+      if (data.deviceOnline.sn) {
+        getUnreadHms(data.deviceOnline.sn)
+      }
+    }, { deep: true })
     getOnlineDeviceHms()
   }, 1000)// 默认3秒，此时改成1秒
   await fetchList();
 });
 
+// 全选
+const onCheckAllChange = async (e: any) => {
+  Object.assign(checkState, {
+    checkSnList: e.target.checked ? state.onlineDockList.map(item => item.sn) : [],
+    indeterminate: false,
+  });
+  await fetchList();
+}
+
+// 点击勾选条
+const onClickCheckItem = async (sn: string) => {
+  const list = checkState.checkSnList;
+  if (list.includes(sn)) {
+    checkState.checkSnList = list.filter(item => item !== sn);
+  } else {
+    list.push(sn);
+    checkState.checkSnList = list;
+  }
+  await fetchList();
+}
+
 const paginationConfig = reactive({
   pageSizeOptions: ['20', '50', '100'],
   showQuickJumper: true,
@@ -353,15 +403,33 @@ const onClickDelete = (id: string, name: string) => {
   display: flex;
 
   &-left {
-    width: 240px;
+    width: 230px;
     height: calc(100vh - 146px);
-    padding: 20px 15px;
+    padding: 10px 8px 0;
     background-color: #232323;
     margin-right: 20px;
-  }
 
-  &-right {
-    width: calc(100% - 260px);
+    &-title {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      color: #FFFFFF;
+
+      .ant-checkbox-wrapper {
+        color: #FFFFFF !important;
+      }
+    }
+
+    &-item {
+      border-radius: 4px;
+      border: 2px solid transparent;
+      overflow: hidden;
+      margin-top: 10px;
+
+      &-selected {
+        border-color: #1fa3f6;
+      }
+    }
   }
 }
 

Web/src/pages/page-web/projects/tsa.vue

@@ -12,7 +12,7 @@
               'item-border',
               dock.sn === state.selectedSn ? 'item-border-selected' : ''
             ]" :style="{ 'margin-top': index === 0 ? '' : '10px' }" v-for="(dock, index) in onlineDocks.data"
-              :key="dock.sn" @click="handleclickItem(dock)">
+              :key="dock.sn" @click="handleClickItem(dock)">
               <Airport :dock="dock" :lookInfo="true" :onClickLookInfo="() => switchVisible(dock, true)" />
             </div>
           </div>
@@ -26,7 +26,7 @@
               'item-border',
               device.sn === state.selectedSn ? 'item-border-selected' : ''
             ]" :style="{ 'margin-top': index === 0 ? '' : '10px' }" v-for="(device, index) in onlineDevices.data"
-              :key="device.sn" @click="handleclickItem(device)">
+              :key="device.sn" @click="handleClickItem(device)">
               <OnLineDevice :device="device" :onClickLookInfo="() => switchVisible(device, false)" />
             </div>
           </div>
@@ -194,7 +194,7 @@ function getOnlineDeviceHms() {
   })
 }
 
-const handleclickItem = (record: any) => {
+const handleClickItem = (record: any) => {
   const sn = record.sn;
   if (state.selectedSn === sn) {
     return state.selectedSn = '';