From 42df14d81519fbbbc603136fab1d33126a7a92e7 Mon Sep 17 00:00:00 2001
From: JiangQiming <291854119@qq.com>
Date: Wed, 15 Mar 2023 17:42:42 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20bug#10406=E3=80=8110399=E3=80=8110390?=
 =?UTF-8?q?=E3=80=8110391=E3=80=8110410=E3=80=8110387=E3=80=8110392?=
 =?UTF-8?q?=E3=80=8110425=E3=80=8110415=E3=80=8110416=E3=80=8110417?=
 =?UTF-8?q?=E3=80=8110412=E3=80=8110409=E3=80=8110405?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Cascade/Channel/BindChannel/index.vue     | 13 +++++-----
 src/views/media/Cascade/Channel/index.vue     | 23 +++++++++--------
 src/views/media/Cascade/Save/index.vue        | 25 +++++++++++++------
 src/views/media/Cascade/index.vue             | 10 +-------
 .../media/DashBoard/components/TopCard.vue    | 16 ++++++------
 src/views/media/Device/Channel/index.vue      |  7 +++++-
 src/views/media/Device/index.vue              |  1 +
 src/views/media/Home/index.vue                |  9 +++++++
 8 files changed, 63 insertions(+), 41 deletions(-)

diff --git a/src/views/media/Cascade/Channel/BindChannel/index.vue b/src/views/media/Cascade/Channel/BindChannel/index.vue
index c0d31075..b98fdfe7 100644
--- a/src/views/media/Cascade/Channel/BindChannel/index.vue
+++ b/src/views/media/Cascade/Channel/BindChannel/index.vue
@@ -10,12 +10,7 @@
         @cancel="_vis = false"
         :confirmLoading="loading"
     >
-        <pro-search
-            type="simple"
-            :columns="columns"
-            target="media"
-            @search="handleSearch"
-        />
+        <pro-search :columns="columns" target="media" @search="handleSearch" />
 
         <JProTable
             ref="listRef"
@@ -23,6 +18,7 @@
             :columns="columns"
             :request="CascadeApi.queryChannelList"
             :defaultParams="{
+                pageSize: 10,
                 sorts: [{ name: 'name', order: 'desc' }],
                 terms: [
                     {
@@ -46,6 +42,10 @@
                 onSelectAll: onSelectAllChange,
             }"
             @cancelSelect="_selectedRowKeys = []"
+            :pagination="{
+                showSizeChanger: true,
+                pageSizeOptions: ['10', '20', '50', '100'],
+            }"
         >
             <template #headerTitle>
                 <h3>通道列表</h3>
@@ -96,6 +96,7 @@ watch(
     () => _vis.value,
     (val) => {
         if (val) handleSearch({ terms: [] });
+        else _selectedRowKeys.value = [];
     },
 );
 
diff --git a/src/views/media/Cascade/Channel/index.vue b/src/views/media/Cascade/Channel/index.vue
index 32e4f396..297ae169 100644
--- a/src/views/media/Cascade/Channel/index.vue
+++ b/src/views/media/Cascade/Channel/index.vue
@@ -1,12 +1,7 @@
 <!-- 国标级联-通道列表 -->
 <template>
     <page-container>
-        <pro-search
-            type="simple"
-            :columns="columns"
-            target="media"
-            @search="handleSearch"
-        />
+        <pro-search :columns="columns" target="media" @search="handleSearch" />
 
         <JProTable
             ref="listRef"
@@ -14,6 +9,7 @@
             :columns="columns"
             :request="(e:any) => CascadeApi.queryBindChannel(route?.query.id as string, e)"
             :defaultParams="{
+                pageSize: 10,
                 sorts: [{ name: 'name', order: 'desc' }],
             }"
             :params="params"
@@ -23,6 +19,10 @@
                 onSelectAll: onSelectAllChange,
             }"
             @cancelSelect="_selectedRowKeys = []"
+            :pagination="{
+                showSizeChanger: true,
+                pageSizeOptions: ['10', '20', '50', '100'],
+            }"
         >
             <template #headerTitle>
                 <h3>通道列表</h3>
@@ -50,9 +50,9 @@
                     </j-space>
                 </j-tooltip>
             </template>
-            <template #gbChannelId="slotProps">
+            <template #channelId="slotProps">
                 <j-space>
-                    <Ellipsis>
+                    <Ellipsis style="width: 150px">
                         {{ slotProps.gbChannelId }}
                     </Ellipsis>
                     <j-popover
@@ -73,6 +73,7 @@
                                 <j-input
                                     v-model:value="gbID"
                                     @change="validField(slotProps)"
+                                    placeholder="请输入国标ID"
                                 />
                                 <div
                                     class="error"
@@ -179,8 +180,8 @@ const columns = [
     },
     {
         title: '国标ID',
-        dataIndex: 'gbChannelId',
-        key: 'gbChannelId',
+        dataIndex: 'channelId',
+        key: 'channelId',
         scopedSlots: true,
         headerCell: 'gbChannelIdHeader', // 表头单元格插槽
         search: {
@@ -204,7 +205,7 @@ const columns = [
         },
     },
     {
-        title: '状态',
+        title: '在线状态',
         dataIndex: 'status',
         key: 'status',
         scopedSlots: true,
diff --git a/src/views/media/Cascade/Save/index.vue b/src/views/media/Cascade/Save/index.vue
index bb9d6556..5b6a4572 100644
--- a/src/views/media/Cascade/Save/index.vue
+++ b/src/views/media/Cascade/Save/index.vue
@@ -17,8 +17,8 @@
                                             message: '请输入名称',
                                         },
                                         {
-                                            max: 84,
-                                            message: '最多可输入84个字符',
+                                            max: 64,
+                                            message: '最多可输入64个字符',
                                         },
                                     ]"
                                 >
@@ -238,6 +238,7 @@
                                                 v-model:value="formData.host"
                                                 placeholder="请选择IP地址"
                                                 :options="allList"
+                                                @change="setPorts"
                                             />
                                         </j-col>
                                         <j-col :span="10">
@@ -301,7 +302,7 @@
                                     <j-radio-group
                                         button-style="solid"
                                         v-model:value="formData.transport"
-                                        @change="setPorts"
+                                        @change="handleTransportChange"
                                     >
                                         <j-radio-button value="UDP">
                                             UDP
@@ -616,19 +617,29 @@ const getAllList = async () => {
     allList.value = result.map((m: any) => ({
         label: m.host,
         value: m.host,
+        ...m,
     }));
     setPorts();
 };
 getAllList();
 
+const handleTransportChange = () => {
+    formData.value.host = undefined;
+    formData.value.port = undefined;
+    setPorts();
+};
 /**
- * 传输协议改变, 获取对应的端口
+ * 获取端口
  */
 const allListPorts = ref([]);
 const setPorts = () => {
-    allListPorts.value = allList.value.find(
-        (f: any) => f.host === formData.value.host,
-    )?.ports[formData.value.transport || ''];
+    if (!formData.value.host) return;
+    allListPorts.value = allList.value
+        .find((f: any) => f.host === formData.value.host)
+        ?.ports[formData.value.transport || '']?.map((m: string) => ({
+            label: m,
+            value: m,
+        }));
 };
 
 /**
diff --git a/src/views/media/Cascade/index.vue b/src/views/media/Cascade/index.vue
index 873d99d4..451a6403 100644
--- a/src/views/media/Cascade/index.vue
+++ b/src/views/media/Cascade/index.vue
@@ -237,20 +237,12 @@ const handleSearch = (e: any) => {
 const lastValueFrom = async (params: any) => {
     const res = await CascadeApi.list(params);
     res.result.data.forEach(async (item: any) => {
-        const resp = await queryChannelCount(item.id);
+        const resp = await CascadeApi.queryBindChannel(item.id, {});
         item.count = resp.result.total;
     });
     return res;
 };
 
-/**
- * 查询通道数量
- * @param id
- */
-const queryChannelCount = async (id: string) => {
-    return await CascadeApi.queryBindChannel(id, {});
-};
-
 /**
  * 新增
  */
diff --git a/src/views/media/DashBoard/components/TopCard.vue b/src/views/media/DashBoard/components/TopCard.vue
index 9614c455..e0c2c1eb 100644
--- a/src/views/media/DashBoard/components/TopCard.vue
+++ b/src/views/media/DashBoard/components/TopCard.vue
@@ -3,13 +3,15 @@
         <div class="top-card-content">
             <div class="content-left">
                 <div class="content-left-title">
-                    <span>{{ title }}</span>
-                    <j-tooltip placement="top" v-if="tooltip">
-                        <template #title>
-                            <span>{{ tooltip }}</span>
-                        </template>
-                        <AIcon type="QuestionCircleOutlined" />
-                    </j-tooltip>
+                    <j-space>
+                        <span>{{ title }}</span>
+                        <j-tooltip placement="top" v-if="tooltip">
+                            <template #title>
+                                <span>{{ tooltip }}</span>
+                            </template>
+                            <AIcon type="QuestionCircleOutlined" />
+                        </j-tooltip>
+                    </j-space>
                 </div>
                 <div class="content-left-value">{{ value }}</div>
             </div>
diff --git a/src/views/media/Device/Channel/index.vue b/src/views/media/Device/Channel/index.vue
index c97839f1..2fa7a1ff 100644
--- a/src/views/media/Device/Channel/index.vue
+++ b/src/views/media/Device/Channel/index.vue
@@ -28,13 +28,18 @@
 
                 <JProTable
                     ref="listRef"
+                    model="table"
                     :columns="columns"
                     :request="(e:any) => ChannelApi.list(e, route?.query.id as string)"
                     :defaultParams="{
+                        pageSize: 10,
                         sorts: [{ name: 'notifyTime', order: 'desc' }],
                     }"
                     :params="params"
-                    model="table"
+                    :pagination="{
+                        showSizeChanger: true,
+                        pageSizeOptions: ['10', '20', '50', '100'],
+                    }"
                 >
                     <template #headerTitle>
                         <j-tooltip
diff --git a/src/views/media/Device/index.vue b/src/views/media/Device/index.vue
index 4b00dc5e..047512a9 100644
--- a/src/views/media/Device/index.vue
+++ b/src/views/media/Device/index.vue
@@ -13,6 +13,7 @@
                 sorts: [{ name: 'createTime', order: 'desc' }],
             }"
             :params="params"
+            :gridColumn="3"
         >
             <template #headerTitle>
                 <PermissionButton
diff --git a/src/views/media/Home/index.vue b/src/views/media/Home/index.vue
index aa888616..8fc611ea 100644
--- a/src/views/media/Home/index.vue
+++ b/src/views/media/Home/index.vue
@@ -44,6 +44,7 @@
                 :columns="columns"
                 :request="deviceApi.list"
                 :defaultParams="{
+                    pageSize: 10,
                     sorts: [{ name: 'createTime', order: 'desc' }],
                 }"
                 :params="params"
@@ -56,7 +57,14 @@
                         deviceItem = record;
                     }
                 }"
+                :pagination="{
+                    showSizeChanger: true,
+                    pageSizeOptions: ['10', '20', '50', '100'],
+                }"
             >
+                <template #channelNumber="slotProps">
+                    <span>{{ slotProps.channelNumber || 0 }}</span>
+                </template>
                 <template #state="slotProps">
                     <a-space>
                         <a-badge
@@ -166,6 +174,7 @@ const columns = [
         title: '通道数量',
         dataIndex: 'channelNumber',
         key: 'channelNumber',
+        scopedSlots: true,
     },
     {
         title: '状态',