From 15ff1c7759d3878615ebbf2e3228068a4ddfa1bf Mon Sep 17 00:00:00 2001
From: jackhoo_98 <jackhoo_98@foxmail.com>
Date: Fri, 24 Feb 2023 14:18:06 +0800
Subject: [PATCH 1/5] =?UTF-8?q?feat:=20=E8=BF=9C=E7=A8=8B=E5=8D=87?=
 =?UTF-8?q?=E7=BA=A7=20=E5=8D=87=E7=BA=A7=E4=BB=BB=E5=8A=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/AIcon/index.tsx                |   3 +-
 .../Firmware/Task/Save/SelectDevices.vue      |  35 +++-
 src/views/device/Firmware/Task/Save/index.vue | 170 ++++++------------
 src/views/device/Firmware/Task/index.vue      |  27 ++-
 src/views/link/AccessConfig/index.vue         |   2 +-
 src/views/link/Certificate/index.vue          |   4 +-
 src/views/link/Protocol/index.vue             |   7 +-
 src/views/link/Type/index.vue                 |   2 +-
 8 files changed, 101 insertions(+), 149 deletions(-)

diff --git a/src/components/AIcon/index.tsx b/src/components/AIcon/index.tsx
index 1c119785..366a7b1c 100644
--- a/src/components/AIcon/index.tsx
+++ b/src/components/AIcon/index.tsx
@@ -55,7 +55,8 @@ const iconKeys = [
     'LikeOutlined',
     'ArrowLeftOutlined',
     'DownloadOutlined',
-    'PauseOutlined'
+    'PauseOutlined',
+    'ControlOutlined',
 ]
 
 const Icon = (props: {type: string}) => {
diff --git a/src/views/device/Firmware/Task/Save/SelectDevices.vue b/src/views/device/Firmware/Task/Save/SelectDevices.vue
index e646a6d1..10657f29 100644
--- a/src/views/device/Firmware/Task/Save/SelectDevices.vue
+++ b/src/views/device/Firmware/Task/Save/SelectDevices.vue
@@ -5,7 +5,11 @@
         :disabled="true"
     >
         <template #addonAfter>
-            <AIcon type="EditOutlined" @click="onVisible" />
+            <AIcon
+                :class="data.view ? 'disabled' : ''"
+                type="EditOutlined"
+                @click="onVisible"
+            />
         </template>
     </a-input>
     <a-modal
@@ -78,6 +82,13 @@ import moment from 'moment';
 type T = any;
 const emit = defineEmits(['update:modelValue', 'change']);
 
+const props = defineProps({
+    data: {
+        type: Object,
+        default: () => {},
+    },
+});
+
 const route = useRoute();
 const params = ref<Record<string, any>>({});
 const visible = ref(false);
@@ -212,15 +223,18 @@ const cancelSelect = () => {
 };
 
 const handleOk = () => {
-    checkLable.value = _selectedRowKeys.value
-        .map((item) => checkAllDataMap.has(item) && checkAllDataMap.get(item))
-        .toString();
+    checkLable.value = updateSelect(_selectedRowKeys.value);
     emit('update:modelValue', _selectedRowKeys.value);
     visible.value = false;
 };
 
+const updateSelect = (selectedRowKeys: T[]) =>
+    selectedRowKeys
+        .map((item) => checkAllDataMap.has(item) && checkAllDataMap.get(item))
+        .toString();
+
 const onVisible = () => {
-    visible.value = true;
+    !props.data.view && (visible.value = true);
 };
 
 const handleCancel = () => {
@@ -236,6 +250,10 @@ onMounted(() => {
                     checkAllDataMap.set(item.id, item.name);
                     return item.id;
                 });
+                if (props.data.id) {
+                    checkLable.value = updateSelect(props.data.deviceId);
+                    emit('update:modelValue', props.data.deviceId);
+                }
             }
         },
     );
@@ -264,9 +282,8 @@ const handleSearch = (e: any) => {
 </script>
 
 <style lang="less" scoped>
-.form {
-    .form-submit {
-        background-color: @primary-color !important;
-    }
+.disabled {
+    pointer-events: auto !important;
+    cursor: not-allowed !important;
 }
 </style>
diff --git a/src/views/device/Firmware/Task/Save/index.vue b/src/views/device/Firmware/Task/Save/index.vue
index 433b453e..2a096774 100644
--- a/src/views/device/Firmware/Task/Save/index.vue
+++ b/src/views/device/Firmware/Task/Save/index.vue
@@ -15,17 +15,20 @@
             :model="formData"
             name="basic"
             autocomplete="off"
+            ref="formRef"
+            :rules="rules"
         >
             <a-row :gutter="[24, 0]">
                 <a-col :span="24">
-                    <a-form-item label="任务名称" v-bind="validateInfos.name">
+                    <a-form-item label="任务名称" name="name">
                         <a-input
                             placeholder="请输入任务名称"
                             v-model:value="formData.name"
+                            :disabled="view"
                     /></a-form-item>
                 </a-col>
                 <a-col :span="24"
-                    ><a-form-item label="推送方式" v-bind="validateInfos.mode">
+                    ><a-form-item label="推送方式" name="mode">
                         <a-select
                             v-model:value="formData.mode"
                             :options="[
@@ -37,18 +40,20 @@
                             show-search
                             :filter-option="filterOption"
                             @change="changeMode"
+                            :disabled="view"
                         /> </a-form-item
                 ></a-col>
                 <a-col :span="12" v-if="formData.mode === 'push'"
                     ><a-form-item
                         label="响应超时时间"
-                        v-bind="validateInfos.responseTimeoutSeconds"
+                        name="responseTimeoutSeconds"
                     >
                         <a-input-number
                             placeholder="请输入响应超时时间(秒)"
                             style="width: 100%"
                             :min="1"
                             :max="99999"
+                            :disabled="view"
                             v-model:value="
                                 formData.responseTimeoutSeconds
                             " /></a-form-item
@@ -56,79 +61,59 @@
                 <a-col
                     :span="formData.mode === 'push' ? 12 : 24"
                     v-if="formData.mode === 'push' || formData.mode === 'pull'"
-                    ><a-form-item
-                        label="升级超时时间"
-                        v-bind="validateInfos.timeoutSeconds"
-                    >
+                    ><a-form-item label="升级超时时间" name="timeoutSeconds">
                         <a-input-number
                             placeholder="请输入升级超时时间(秒)"
                             style="width: 100%"
                             :min="1"
                             :max="99999"
+                            :disabled="view"
                             v-model:value="
                                 formData.timeoutSeconds
                             " /></a-form-item
                 ></a-col>
                 <a-col :span="12" v-if="!!formData.mode"
-                    ><a-form-item
-                        label="升级设备"
-                        v-bind="validateInfos.releaseType"
-                    >
+                    ><a-form-item label="升级设备" name="releaseType">
                         <a-radio-group
                             v-model:value="formData.releaseType"
                             button-style="solid"
                             @change="changeShareCluster"
+                            :disabled="view"
                         >
                             <a-radio value="all">所有设备</a-radio>
                             <a-radio value="part">选择设备</a-radio>
                         </a-radio-group>
                     </a-form-item>
                 </a-col>
-                <a-col :span="12" v-if="formData.releaseType === 'part'"
-                    ><a-form-item
-                        label="选择设备"
-                        v-bind="validateInfos.deviceId"
-                    >
+                <a-col :span="12" v-if="formData.releaseType === 'part'">
+                    <a-form-item label="选择设备" name="deviceId">
                         <SelectDevices
                             v-model:modelValue="formData.deviceId"
-                            :data="devicesData"
+                            :data="data"
                         ></SelectDevices> </a-form-item
                 ></a-col>
-
                 <a-col :span="24">
-                    <a-form-item
-                        label="说明"
-                        v-bind="validateInfos.description"
-                    >
+                    <a-form-item label="说明" name="description">
                         <a-textarea
                             placeholder="请输入说明"
                             v-model:value="formData.description"
                             :maxlength="200"
                             :rows="3"
                             showCount
+                            :disabled="view"
                         /> </a-form-item
                 ></a-col>
             </a-row>
         </a-form>
     </a-modal>
-    <!-- <SelectDevices v-if="visible" @change="saveChange"></SelectDevices> -->
 </template>
 <script lang="ts" setup name="TaskPage">
-import { message, Form } from 'ant-design-vue';
+import { message } from 'ant-design-vue';
 import { getImage } from '@/utils/comm';
-import { save, update, queryProduct } from '@/api/device/firmware';
+import { queryProduct, saveTask } from '@/api/device/firmware';
 import type { FormInstance } from 'ant-design-vue';
-import type { Properties } from '../../type';
 import SelectDevices from './SelectDevices.vue';
 
-const route = useRoute();
-console.log(111, route.query);
-
-const loading = ref(false);
-const useForm = Form.useForm;
-const productOptions = ref([]);
-const visible = ref(false);
-const devicesData = ref()
 const props = defineProps({
     data: {
         type: Object,
@@ -136,9 +121,16 @@ const props = defineProps({
     },
 });
 
+const formRef = ref<FormInstance>();
+
+const route = useRoute();
+const loading = ref(false);
+const productOptions = ref([]);
 const emit = defineEmits(['change']);
 
-const id = props.data.id;
+const firmwareId = route.query.id;
+const productId = route.query.productId;
+const view = props.data.view;
 
 const formData = ref({
     name: '',
@@ -146,98 +138,48 @@ const formData = ref({
     responseTimeoutSeconds: '',
     timeoutSeconds: '',
     releaseType: 'all',
-    deviceId: [],
+    deviceId: undefined,
     description: '',
 });
 
-const extraValue = ref({});
-
-const validatorSign = async (_: Record<string, any>, value: string) => {
-    // const { releaseType, url } = formData.value;
-    // if (value && !!releaseType && !!url && !extraValue.value) {
-    //     return extraValue.value[releaseType] !== value
-    //         ? Promise.reject('选择设备不一致，请检查文件是否上传正确')
-    //         : Promise.resolve();
-    // } else {
-    //     return Promise.resolve();
-    // }
+const rules = {
+    name: [
+        { required: true, message: '请输入任务名称' },
+        { max: 64, message: '最多可输入64个字符' },
+    ],
+    mode: [{ required: true, message: '请选择推送方式' }],
+    responseTimeoutSeconds: [{ required: true, message: '请输入响应超时时间' }],
+    timeoutSeconds: [{ required: true, message: '请输入升级超时时间' }],
+    releaseType: [{ required: true }],
+    deviceId: [{ required: true, message: '请选择设备' }],
+    description: [{ max: 200, message: '最多可输入200个字符' }],
 };
 
-const { resetFields, validate, validateInfos } = useForm(
-    formData,
-    reactive({
-        name: [
-            { required: true, message: '请输入任务名称' },
-            { max: 64, message: '最多可输入64个字符' },
-        ],
-        mode: [{ required: true, message: '请选择推送方式' }],
-        responseTimeoutSeconds: [
-            { required: true, message: '请输入响应超时时间' },
-        ],
-        timeoutSeconds: [{ required: true, message: '请输入升级超时时间' }],
-        releaseType: [{ required: true }],
-        deviceId: [
-            { required: true, message: '请选择设备' },
-            { validator: validatorSign },
-        ],
-        description: [{ max: 200, message: '最多可输入200个字符' }],
-    }),
-);
-
 const filterOption = (input: string, option: any) => {
     return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
 };
 
-const changeMode = (value) => {
-    console.log(111, value, formData.value);
-};
-
-const onChange = () => {
-    visible.value = true;
-};
-const saveChange = () => {
-    visible.value = false;
-};
-
 const onSubmit = async () => {
-    validate()
-        .then(async (res) => {
-            // const product = productOptions.value.find(
-            //     (item) => item.value === res.mode,
-            // );
-            // const productName = product.label || props.data?.url;
-            // const size = extraValue.value.length || props.data?.size;
-            // const params = {
-            //     ...toRaw(formData.value),
-            //     properties: !!properties ? properties : [],
-            //     productName,
-            //     size,
-            // };
-            // loading.value = true;
-            // const response = !id
-            //     ? await save(params)
-            //     : await update({ ...props.data, ...params });
-            // if (response.status === 200) {
-            //     message.success('操作成功');
-            //     emit('change', true);
-            // }
-            // loading.value = false;
-        })
-        .catch((err) => {
-            loading.value = false;
-        });
+    const params = await formRef.value?.validate();
+    loading.value = true;
+    const resp = await saveTask({
+        ...params,
+        firmwareId,
+        productId,
+    });
+    loading.value = false;
+    resp.success && emit('change', true);
 };
 
 const handleOk = () => {
-    onSubmit();
+    return view ? emit('change', false) : onSubmit();
 };
 const handleCancel = () => {
     emit('change', false);
 };
 
-const changeSignMethod = () => {
-    formData.value.deviceId = '';
-    formData.value.url = '';
+const changeShareCluster = () => {
+    formData.value.deviceId = undefined;
 };
 
 onMounted(() => {
@@ -256,16 +198,14 @@ watch(
     () => props.data,
     (value) => {
         if (value.id) {
-            formData.value = value;
+            formData.value = {
+                ...value,
+                releaseType: value?.deviceId ? 'part' : 'all',
+            };
         }
     },
     { immediate: true, deep: true },
 );
-watch(
-    () => extraValue.value,
-    () => validate('deviceId'),
-    { deep: true },
-);
 </script>
 
 <style lang="less" scoped>
diff --git a/src/views/device/Firmware/Task/index.vue b/src/views/device/Firmware/Task/index.vue
index f44d3cef..82f69126 100644
--- a/src/views/device/Firmware/Task/index.vue
+++ b/src/views/device/Firmware/Task/index.vue
@@ -59,10 +59,10 @@
     </page-container>
 </template>
 <script lang="ts" setup name="CertificatePage">
-import type { ActionsType } from '@/components/Table/index.vue';
+import type { ActionsType } from '@/components/Table/index';
 import { task, startTask, stopTask } from '@/api/device/firmware';
 import { message } from 'ant-design-vue';
-import Save from './Save/index.vue'
+import Save from './Save/index.vue';
 
 const tableRef = ref<Record<string, any>>({});
 const router = useRouter();
@@ -83,7 +83,6 @@ const columns = [
         search: {
             type: 'string',
         },
-        // scopedSlots: true,
     },
     {
         title: '推送方式',
@@ -153,14 +152,14 @@ const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
 
     const Actions = [
         {
-            key: 'edit',
+            key: 'details',
             text: '详情',
             tooltip: {
                 title: '详情',
             },
-            icon: 'EditOutlined',
+            icon: 'icon-details',
             onClick: async () => {
-                handlEdit(data.id);
+                handlDetails(data.id);
             },
         },
         {
@@ -206,7 +205,7 @@ const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
                     tableRef.value.reload();
                 }
             },
-            icon: 'PauseOutlined',
+            icon: 'ControlOutlined',
         });
     }
 
@@ -216,21 +215,20 @@ const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
 const handlAdd = () => {
     current.value = {};
     visible.value = true;
-    
 };
 
 const handlEye = (data: object) => {
-    current.value = toRaw(data);
+    current.value = toRaw({ ...data, view: true });
     visible.value = true;
 };
 
-const handlEdit = (id: string) => {
+const handlDetails = (id: string) => {
     // router.push({
     //     path: `/iot/link/certificate/detail/${id}`,
     //     query: { view: false },
     // });
 };
-const saveChange = (value: FormDataType) => {
+const saveChange = (value: boolean) => {
     visible.value = false;
     current.value = {};
     if (value) {
@@ -248,9 +246,4 @@ const handleSearch = (e: any) => {
 };
 </script>
 
-<style lang="less" scoped>
-.a {
-    // display: none;
-    visibility: 0;
-}
-</style>
+<style lang="less" scoped></style>
diff --git a/src/views/link/AccessConfig/index.vue b/src/views/link/AccessConfig/index.vue
index d4ddcd8d..851b6a78 100644
--- a/src/views/link/AccessConfig/index.vue
+++ b/src/views/link/AccessConfig/index.vue
@@ -188,7 +188,7 @@
     </page-container>
 </template>
 <script lang="ts" setup name="AccessConfigPage">
-import type { ActionsType } from '@/components/Table/index.vue';
+import type { ActionsType } from '@/components/Table/index';
 import { getImage } from '@/utils/comm';
 import {
     list,
diff --git a/src/views/link/Certificate/index.vue b/src/views/link/Certificate/index.vue
index ed85562e..e4474b35 100644
--- a/src/views/link/Certificate/index.vue
+++ b/src/views/link/Certificate/index.vue
@@ -59,8 +59,8 @@
     </page-container>
 </template>
 <script lang="ts" setup name="CertificatePage">
-import type { ActionsType } from '@/components/Table/index.vue';
-import { save, query, remove } from '@/api/link/certificate';
+import type { ActionsType } from '@/components/Table/index';
+import { query, remove } from '@/api/link/certificate';
 import { message } from 'ant-design-vue';
 
 const tableRef = ref<Record<string, any>>({});
diff --git a/src/views/link/Protocol/index.vue b/src/views/link/Protocol/index.vue
index 2c0b18f5..03e34035 100644
--- a/src/views/link/Protocol/index.vue
+++ b/src/views/link/Protocol/index.vue
@@ -31,7 +31,9 @@
                         </template>
                         <template #content>
                             <div class="card-item-content">
-                                <h3 class="card-item-content-title card-item-content-title-a">
+                                <h3
+                                    class="card-item-content-title card-item-content-title-a"
+                                >
                                     {{ slotProps.name }}
                                 </h3>
                                 <a-row class="card-item-content-box">
@@ -148,7 +150,7 @@
     </page-container>
 </template>
 <script lang="ts" setup name="AccessConfigPage">
-import type { ActionsType } from '@/components/Table/index.vue';
+import type { ActionsType } from '@/components/Table/index';
 import { getImage } from '@/utils/comm';
 import { list, remove } from '@/api/link/protocol';
 import { message } from 'ant-design-vue';
@@ -156,7 +158,6 @@ import Save from './Save/index.vue';
 import _ from 'lodash';
 
 const tableRef = ref<Record<string, any>>({});
-const router = useRouter();
 const params = ref<Record<string, any>>({});
 
 const visible = ref(false);
diff --git a/src/views/link/Type/index.vue b/src/views/link/Type/index.vue
index bdf5c738..9fff29a0 100644
--- a/src/views/link/Type/index.vue
+++ b/src/views/link/Type/index.vue
@@ -186,7 +186,7 @@
     </page-container>
 </template>
 <script lang="ts" setup name="TypePage">
-import type { ActionsType } from '@/components/Table/index.vue';
+import type { ActionsType } from '@/components/Table/index'
 import { getImage } from '@/utils/comm';
 import { supports, query, remove, start, shutdown } from '@/api/link/type';
 import { message } from 'ant-design-vue';

From d226d8758fd28ccccddb48cb378aebccd27745c3 Mon Sep 17 00:00:00 2001
From: jackhoo_98 <jackhoo_98@foxmail.com>
Date: Fri, 24 Feb 2023 18:24:15 +0800
Subject: [PATCH 2/5] =?UTF-8?q?feat:=20=E8=BF=9C=E7=A8=8B=E5=8D=87?=
 =?UTF-8?q?=E7=BA=A7=20=E5=8D=87=E7=BA=A7=E4=BB=BB=E5=8A=A1=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85=20=E5=9F=BA=E6=9C=AC=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../device/Firmware/Task/Detail/index.vue     | 460 ++++++++++++++++++
 src/views/device/Firmware/Task/index.vue      |   9 +-
 2 files changed, 464 insertions(+), 5 deletions(-)
 create mode 100644 src/views/device/Firmware/Task/Detail/index.vue

diff --git a/src/views/device/Firmware/Task/Detail/index.vue b/src/views/device/Firmware/Task/Detail/index.vue
new file mode 100644
index 00000000..1ddc9b87
--- /dev/null
+++ b/src/views/device/Firmware/Task/Detail/index.vue
@@ -0,0 +1,460 @@
+<template>
+    <page-container>
+        <div>
+            <div class="state-container">
+                <div
+                    class="state-body"
+                    v-for="item in stateList"
+                    :key="item.key"
+                >
+                    <div class="state-content">
+                        <div class="state-header">
+                            <div class="state-title">
+                                <a-badge
+                                    :text="item.name"
+                                    :color="colorMap.get(item.key)"
+                                />
+                            </div>
+
+                            <div class="state-title-right">
+                                <a-popconfirm
+                                    title="确定批量重试?"
+                                    ok-text="确定"
+                                    cancel-text="取消"
+                                    @confirm="confirm"
+                                    v-if="
+                                        item.key === 'failed' &&
+                                        stateInfo?.mode?.value === 'push'
+                                    "
+                                >
+                                    <a href="#">批量重试</a>
+                                </a-popconfirm>
+                                <img
+                                    :src="buttonImg"
+                                    @click="handleRefresh(item.key)"
+                                />
+                            </div>
+                        </div>
+                        <div class="state-box">
+                            <div
+                                class="state-left"
+                                :style="`color: ${colorMap.get(item.key)}`"
+                            >
+                                {{ state[item.key] }}
+                            </div>
+                            <img class="state-right" :src="item.img" />
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <Search :columns="columns" target="search" @search="handleSearch" />
+            <JTable
+                ref="tableRef"
+                model="TABLE"
+                :columns="columns"
+                :request="history"
+                :defaultParams="{
+                    sorts: [{ name: 'createTime', order: 'desc' }],
+                    terms: defaultParams,
+                }"
+                :params="params"
+            >
+                <template #createTime="slotProps">
+                    <span>{{
+                        moment(slotProps.createTime).format(
+                            'YYYY-MM-DD HH:mm:ss',
+                        )
+                    }}</span>
+                </template>
+                <template #productId="slotProps">
+                    <span>{{ slotProps.productName }}</span>
+                </template>
+                <template #state="slotProps">
+                    <a-badge
+                        :text="slotProps.state.text"
+                        :color="colorMap.get(slotProps.state.value)"
+                    />
+                </template>
+                <template #progress="slotProps">
+                    <span>{{ slotProps.progress }}%</span>
+                </template>
+                <template #action="slotProps">
+                    <a-space :size="16">
+                        <a-tooltip
+                            v-for="i in getActions(slotProps)"
+                            :key="i.key"
+                            v-bind="i.tooltip"
+                        >
+                            <a-popconfirm
+                                v-if="i.popConfirm"
+                                v-bind="i.popConfirm"
+                            >
+                                <a-button
+                                    :disabled="i.disabled"
+                                    style="padding: 0"
+                                    type="link"
+                                    ><AIcon :type="i.icon"
+                                /></a-button>
+                            </a-popconfirm>
+                            <a-button
+                                style="padding: 0"
+                                type="link"
+                                v-else
+                                @click="i.onClick && i.onClick(slotProps)"
+                            >
+                                <a-button
+                                    :disabled="i.disabled"
+                                    style="padding: 0"
+                                    type="link"
+                                    ><AIcon :type="i.icon"
+                                /></a-button>
+                            </a-button>
+                        </a-tooltip>
+                    </a-space>
+                </template>
+            </JTable>
+        </div>
+    </page-container>
+</template>
+<script lang="ts" setup name="TaskDetailPage">
+import type { ActionsType } from '@/components/Table/index';
+import {
+    taskById,
+    history,
+    historyCount,
+    queryProduct,
+} from '@/api/device/firmware';
+import { message } from 'ant-design-vue';
+import { getImage } from '@/utils/comm';
+import moment from 'moment';
+import { cloneDeep } from 'lodash-es';
+
+const tableRef = ref<Record<string, any>>({});
+const router = useRouter();
+const route = useRoute();
+const params = ref<Record<string, any>>({});
+const taskId = route.params?.id as string;
+const visible = ref(false);
+const current = ref({});
+const productOptions = ref([]);
+
+const colorMap = new Map();
+colorMap.set('waiting', '#FF9000');
+colorMap.set('processing', '#4293FF');
+colorMap.set('failed', '#F76F5D');
+colorMap.set('success', '#24B276');
+colorMap.set('canceled', '#999');
+
+const stateList = [
+    {
+        key: 'waiting',
+        name: '等待升级',
+        img: getImage('/firmware/waiting.png'),
+    },
+    {
+        key: 'processing',
+        name: '升级中',
+        img: getImage('/firmware/loading.png'),
+    },
+    {
+        key: 'success',
+        name: '升级完成',
+        img: getImage('/firmware/finish.png'),
+    },
+    {
+        key: 'failed',
+        name: '升级失败',
+        img: getImage('/firmware/error.png'),
+    },
+    {
+        key: 'canceled',
+        name: '已停止',
+        img: getImage('/firmware/cancel.png'),
+    },
+];
+
+const buttonImg = getImage('/firmware/button.png');
+const state = ref({
+    waiting: 0,
+    processing: 0,
+    success: 0,
+    failed: 0,
+    canceled: 0,
+});
+const stateInfo = ref();
+
+const columns = [
+    {
+        title: '设备名称',
+        dataIndex: 'deviceName',
+        key: 'deviceName',
+        fixed: 'left',
+        width: 200,
+        ellipsis: true,
+        search: {
+            type: 'string',
+        },
+    },
+    {
+        title: '所属产品',
+        dataIndex: 'productId',
+        key: 'productId',
+        ellipsis: true,
+        width: 200,
+        scopedSlots: true,
+        // search: {
+        //     type: 'select',
+        //     options: productOptions,
+        // },
+    },
+    {
+        title: '创建时间',
+        key: 'createTime',
+        dataIndex: 'createTime',
+        width: 200,
+        scopedSlots: true,
+    },
+    {
+        title: '完成时间',
+        key: 'completeTime',
+        ellipsis: true,
+        dataIndex: 'completeTime',
+        search: {
+            type: 'date',
+        },
+        scopedSlots: true,
+    },
+    {
+        title: '进度',
+        dataIndex: 'progress',
+        key: 'progress',
+        ellipsis: true,
+        scopedSlots: true,
+        width: 200,
+        search: {
+            type: 'string',
+        },
+    },
+    {
+        title: '状态',
+        dataIndex: 'state',
+        key: 'state',
+        ellipsis: true,
+        search: {
+            type: 'select',
+            options: stateList.map((item) => ({
+                value: item.key,
+                label: item.name,
+            })),
+        },
+        scopedSlots: true,
+        width: 200,
+    },
+
+    {
+        title: '操作',
+        key: 'action',
+        fixed: 'right',
+        width: 200,
+        scopedSlots: true,
+    },
+];
+
+const defaultParams = [
+    {
+        terms: [
+            {
+                column: 'taskId',
+                value: taskId,
+            },
+        ],
+    },
+];
+
+const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
+    if (!data) {
+        return [];
+    }
+
+    const stop = data.waiting > 0 && data?.state?.value === 'processing';
+    const pause = data?.state?.value === 'canceled';
+
+    const Actions = [
+        {
+            key: 'details',
+            text: '详情',
+            tooltip: {
+                title: '详情',
+            },
+            icon: 'icon-details',
+            onClick: async () => {
+                handlDetails(data.id);
+            },
+        },
+        {
+            key: 'eye',
+            text: '查看',
+            tooltip: {
+                title: '查看',
+            },
+            icon: 'EyeOutlined',
+            onClick: async () => {
+                handlEye(data);
+            },
+        },
+    ];
+
+    if (stop) {
+        Actions.push({
+            key: 'actions',
+            text: '停止',
+            tooltip: {
+                title: '停止',
+            },
+            onClick: async () => {
+                const res = await stopTask(data.id);
+                if (res.success) {
+                    message.success('操作成功');
+                    tableRef.value.reload();
+                }
+            },
+            icon: 'StopOutlined',
+        });
+    } else if (pause) {
+        Actions.push({
+            key: 'actions',
+            text: '继续升级',
+            tooltip: {
+                title: '继续升级',
+            },
+            onClick: async () => {
+                const res = await startTask(data.id, ['canceled']);
+                if (res.success) {
+                    message.success('操作成功');
+                    tableRef.value.reload();
+                }
+            },
+            icon: 'ControlOutlined',
+        });
+    }
+
+    return Actions;
+};
+
+const handlAdd = () => {
+    current.value = {};
+    visible.value = true;
+};
+
+const handlEye = (data: object) => {
+    current.value = toRaw({ ...data, view: true });
+    visible.value = true;
+};
+
+const handlDetails = (id: string) => {
+    // router.push({
+    //     path: `/iot/link/certificate/detail/${id}`,
+    //     query: { view: false },
+    // });
+};
+const saveChange = (value: boolean) => {
+    visible.value = false;
+    current.value = {};
+    if (value) {
+        message.success('操作成功');
+        tableRef.value.reload();
+    }
+};
+const confirm = (e: MouseEvent) => {
+    console.log(e);
+    message.success('Click on Yes');
+};
+
+const handleRefresh = async (key: string) => {
+    const terms = cloneDeep(defaultParams);
+    terms[0].terms.push({ column: 'state', value: key });
+    const res = await historyCount({ terms });
+    if (res.success) {
+        state.value[key] = res?.result || 0;
+    }
+};
+
+onMounted(() => {
+    stateList.forEach((item) => {
+        handleRefresh(item.key);
+    });
+    taskById(taskId).then((res) => {
+        if (res.success) {
+            stateInfo.value = res?.result;
+        }
+    });
+});
+
+/**
+ * 搜索
+ * @param params
+ */
+const handleSearch = (e: any) => {
+    params.value = e;
+};
+</script>
+
+<style lang="less" scoped>
+.state-container {
+    width: 100%;
+    min-height: 148px;
+    background-color: #ffffff;
+    padding: 24px 12px;
+    margin-bottom: 24px;
+    display: flex;
+    flex-wrap: wrap;
+    .state-body {
+        background: linear-gradient(
+            135.62deg,
+            #f6f7fd 22.27%,
+            rgba(255, 255, 255, 0.86) 91.82%
+        );
+        min-width: 185px;
+        flex: 1px;
+        margin: 0 12px;
+        .state-content {
+            width: 100% -15px;
+            height: 100%;
+            margin: 15px 0 0 15px;
+            align-content: center;
+
+            .state-header {
+                display: flex;
+                justify-content: space-between;
+                height: 22px;
+                .state-title-right {
+                    z-index: 1;
+                    img {
+                        margin: 0 10px;
+                        width: 22px;
+                        // margin-top: -12px;
+                        margin-top: -5px;
+                        cursor: pointer;
+                    }
+                }
+            }
+            .state-box {
+                display: flex;
+                justify-content: space-between;
+                .state-left {
+                    flex: 1;
+                    font-size: 52px;
+                }
+                .state-right {
+                    height: 100%;
+                    flex: 1;
+                    margin-top: -31px;
+                    max-width: 120px;
+                    max-height: 94px;
+                }
+            }
+        }
+    }
+}
+</style>
diff --git a/src/views/device/Firmware/Task/index.vue b/src/views/device/Firmware/Task/index.vue
index 82f69126..42e65021 100644
--- a/src/views/device/Firmware/Task/index.vue
+++ b/src/views/device/Firmware/Task/index.vue
@@ -58,12 +58,14 @@
         <Save v-if="visible" :data="current" @change="saveChange" />
     </page-container>
 </template>
-<script lang="ts" setup name="CertificatePage">
+<script lang="ts" setup name="TaskPage">
 import type { ActionsType } from '@/components/Table/index';
 import { task, startTask, stopTask } from '@/api/device/firmware';
 import { message } from 'ant-design-vue';
 import Save from './Save/index.vue';
+import { useMenuStore } from 'store/menu';
 
+const menuStory = useMenuStore();
 const tableRef = ref<Record<string, any>>({});
 const router = useRouter();
 const route = useRoute();
@@ -223,10 +225,7 @@ const handlEye = (data: object) => {
 };
 
 const handlDetails = (id: string) => {
-    // router.push({
-    //     path: `/iot/link/certificate/detail/${id}`,
-    //     query: { view: false },
-    // });
+    // menuStory.jumpPage('device/Firmware/Task/Detail', { id });
 };
 const saveChange = (value: boolean) => {
     visible.value = false;

From c3b8d46e7ce323696c6aa462c595de86ef0a9a76 Mon Sep 17 00:00:00 2001
From: jackhoo_98 <jackhoo_98@foxmail.com>
Date: Sat, 25 Feb 2023 21:44:23 +0800
Subject: [PATCH 3/5] =?UTF-8?q?feat:=20=E8=BF=9C=E7=A8=8B=E5=8D=87?=
 =?UTF-8?q?=E7=BA=A7=20=E5=8D=87=E7=BA=A7=E4=BB=BB=E5=8A=A1=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/AIcon/index.tsx                |   1 +
 .../device/Firmware/Task/Detail/Save.vue      |  32 ++++
 .../device/Firmware/Task/Detail/index.vue     | 151 ++++++++----------
 3 files changed, 97 insertions(+), 87 deletions(-)
 create mode 100644 src/views/device/Firmware/Task/Detail/Save.vue

diff --git a/src/components/AIcon/index.tsx b/src/components/AIcon/index.tsx
index 366a7b1c..2c589ac5 100644
--- a/src/components/AIcon/index.tsx
+++ b/src/components/AIcon/index.tsx
@@ -57,6 +57,7 @@ const iconKeys = [
     'DownloadOutlined',
     'PauseOutlined',
     'ControlOutlined',
+    'RedoOutlined',
 ]
 
 const Icon = (props: {type: string}) => {
diff --git a/src/views/device/Firmware/Task/Detail/Save.vue b/src/views/device/Firmware/Task/Detail/Save.vue
new file mode 100644
index 00000000..9aca484d
--- /dev/null
+++ b/src/views/device/Firmware/Task/Detail/Save.vue
@@ -0,0 +1,32 @@
+<template lang="">
+    <a-modal
+        title="查看"
+        ok-text="确认"
+        cancel-text="取消"
+        :visible="true"
+        width="500px"
+        @cancel="handleCancel"
+        @ok="handleOk"
+    >
+        <span>失败原因：{{ data }}</span>
+    </a-modal>
+</template>
+<script lang="ts" setup name="TaskDetailSavePage">
+const props = defineProps({
+    data: {
+        type: Object,
+        default: () => {},
+    },
+});
+
+const emit = defineEmits(['change']);
+
+const handleOk = () => {
+    handleCancel();
+};
+const handleCancel = () => {
+    emit('change', false);
+};
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/device/Firmware/Task/Detail/index.vue b/src/views/device/Firmware/Task/Detail/index.vue
index 1ddc9b87..dc4f4d29 100644
--- a/src/views/device/Firmware/Task/Detail/index.vue
+++ b/src/views/device/Firmware/Task/Detail/index.vue
@@ -17,22 +17,27 @@
                             </div>
 
                             <div class="state-title-right">
-                                <a-popconfirm
-                                    title="确定批量重试?"
-                                    ok-text="确定"
-                                    cancel-text="取消"
-                                    @confirm="confirm"
-                                    v-if="
-                                        item.key === 'failed' &&
-                                        stateInfo?.mode?.value === 'push'
-                                    "
-                                >
-                                    <a href="#">批量重试</a>
-                                </a-popconfirm>
-                                <img
-                                    :src="buttonImg"
-                                    @click="handleRefresh(item.key)"
-                                />
+                                <div>
+                                    <a-popconfirm
+                                        title="确定批量重试?"
+                                        ok-text="确定"
+                                        cancel-text="取消"
+                                        @confirm="confirm"
+                                        v-if="
+                                            item.key === 'failed' &&
+                                            stateInfo?.mode?.value === 'push'
+                                        "
+                                    >
+                                        <a href="#">批量重试</a>
+                                    </a-popconfirm>
+                                </div>
+
+                                <div class="img">
+                                    <img
+                                        :src="buttonImg"
+                                        @click="handleRefresh(item.key)"
+                                    />
+                                </div>
                             </div>
                         </div>
                         <div class="state-box">
@@ -114,6 +119,7 @@
                     </a-space>
                 </template>
             </JTable>
+            <Save :data="current" v-if="visible" @change="saveChange" />
         </div>
     </page-container>
 </template>
@@ -124,12 +130,14 @@ import {
     history,
     historyCount,
     queryProduct,
+    startTask,
+    startOneTask,
 } from '@/api/device/firmware';
 import { message } from 'ant-design-vue';
 import { getImage } from '@/utils/comm';
 import moment from 'moment';
 import { cloneDeep } from 'lodash-es';
-
+import Save from './Save.vue';
 const tableRef = ref<Record<string, any>>({});
 const router = useRouter();
 const route = useRoute();
@@ -276,22 +284,7 @@ const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
     if (!data) {
         return [];
     }
-
-    const stop = data.waiting > 0 && data?.state?.value === 'processing';
-    const pause = data?.state?.value === 'canceled';
-
     const Actions = [
-        {
-            key: 'details',
-            text: '详情',
-            tooltip: {
-                title: '详情',
-            },
-            icon: 'icon-details',
-            onClick: async () => {
-                handlDetails(data.id);
-            },
-        },
         {
             key: 'eye',
             text: '查看',
@@ -300,45 +293,21 @@ const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
             },
             icon: 'EyeOutlined',
             onClick: async () => {
-                handlEye(data);
+                handlEye(data.errorReason);
+            },
+        },
+        {
+            key: 'try',
+            text: '重试',
+            tooltip: {
+                title: '重试',
+            },
+            icon: 'RedoOutlined',
+            onClick: async () => {
+                handlTry(data.id);
             },
         },
     ];
-
-    if (stop) {
-        Actions.push({
-            key: 'actions',
-            text: '停止',
-            tooltip: {
-                title: '停止',
-            },
-            onClick: async () => {
-                const res = await stopTask(data.id);
-                if (res.success) {
-                    message.success('操作成功');
-                    tableRef.value.reload();
-                }
-            },
-            icon: 'StopOutlined',
-        });
-    } else if (pause) {
-        Actions.push({
-            key: 'actions',
-            text: '继续升级',
-            tooltip: {
-                title: '继续升级',
-            },
-            onClick: async () => {
-                const res = await startTask(data.id, ['canceled']);
-                if (res.success) {
-                    message.success('操作成功');
-                    tableRef.value.reload();
-                }
-            },
-            icon: 'ControlOutlined',
-        });
-    }
-
     return Actions;
 };
 
@@ -347,28 +316,29 @@ const handlAdd = () => {
     visible.value = true;
 };
 
-const handlEye = (data: object) => {
-    current.value = toRaw({ ...data, view: true });
+const handlEye = (data: string) => {
+    current.value = data || '';
     visible.value = true;
 };
 
-const handlDetails = (id: string) => {
-    // router.push({
-    //     path: `/iot/link/certificate/detail/${id}`,
-    //     query: { view: false },
-    // });
-};
-const saveChange = (value: boolean) => {
-    visible.value = false;
-    current.value = {};
-    if (value) {
+const handlTry = async (id: string) => {
+    const res = await startOneTask([id]);
+    if (res.success) {
         message.success('操作成功');
         tableRef.value.reload();
     }
 };
-const confirm = (e: MouseEvent) => {
-    console.log(e);
-    message.success('Click on Yes');
+const saveChange = (value: boolean) => {
+    visible.value = false;
+    current.value = {};
+};
+const confirm = async (e: MouseEvent) => {
+    const res = await startTask(taskId, ['failed']);
+    if (res.success) {
+        message.success('操作成功');
+        handleRefresh('failed');
+        tableRef.value.reload();
+    }
 };
 
 const handleRefresh = async (key: string) => {
@@ -416,6 +386,7 @@ const handleSearch = (e: any) => {
             rgba(255, 255, 255, 0.86) 91.82%
         );
         min-width: 185px;
+        max-width: 580px;
         flex: 1px;
         margin: 0 12px;
         .state-content {
@@ -430,12 +401,18 @@ const handleSearch = (e: any) => {
                 height: 22px;
                 .state-title-right {
                     z-index: 1;
-                    img {
-                        margin: 0 10px;
+                    display: flex;
+                    .img {
                         width: 22px;
-                        // margin-top: -12px;
-                        margin-top: -5px;
+                        margin: 0 10px;
                         cursor: pointer;
+                        img {
+                            width: 22px;
+                            margin-top: -5px;
+                        }
+                    }
+                    .img:active {
+                        border: 1px #40a9ff solid;
                     }
                 }
             }

From c60410c1d49bde6c50593457256a41da6d4e1808 Mon Sep 17 00:00:00 2001
From: JiangQiming <291854119@qq.com>
Date: Mon, 27 Feb 2023 14:40:49 +0800
Subject: [PATCH 4/5] =?UTF-8?q?feat:=20=E9=80=9A=E9=81=93=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/media/channel.ts                     |  15 ++
 src/components/AIcon/index.tsx               |   4 +-
 src/views/media/Device/Channel/index.vue     | 254 ++++++++++++-------
 src/views/media/Device/Playback/index.vue    |   7 +
 src/views/media/Device/Playback/typings.d.ts |  15 ++
 5 files changed, 200 insertions(+), 95 deletions(-)
 create mode 100644 src/api/media/channel.ts
 create mode 100644 src/views/media/Device/Playback/index.vue
 create mode 100644 src/views/media/Device/Playback/typings.d.ts

diff --git a/src/api/media/channel.ts b/src/api/media/channel.ts
new file mode 100644
index 00000000..3c4a67bd
--- /dev/null
+++ b/src/api/media/channel.ts
@@ -0,0 +1,15 @@
+import server from '@/utils/request'
+
+export default {
+    // 列表
+    list: (data: any, id: string) => server.post(`/media/device/${id}/channel/_query`, data),
+    // 详情
+    detail: (id: string): any => server.get(`/media/channel/${id}`),
+    // 验证通道ID是否存在
+    validateField: (params: string): any => server.get(`/media/channel/channelId/_validate`, params),
+    // 新增
+    save: (data: any) => server.post(`/media/channel`, data),
+    // 修改
+    update: (data: any) => server.put(`/media/channel`, data),
+    del: (id: string) => server.remove(`media/channel/${id}`),
+}
\ No newline at end of file
diff --git a/src/components/AIcon/index.tsx b/src/components/AIcon/index.tsx
index 1c119785..b723fbde 100644
--- a/src/components/AIcon/index.tsx
+++ b/src/components/AIcon/index.tsx
@@ -55,7 +55,9 @@ const iconKeys = [
     'LikeOutlined',
     'ArrowLeftOutlined',
     'DownloadOutlined',
-    'PauseOutlined'
+    'PauseOutlined',
+    'VideoCameraOutlined',
+    'HistoryOutlined',
 ]
 
 const Icon = (props: {type: string}) => {
diff --git a/src/views/media/Device/Channel/index.vue b/src/views/media/Device/Channel/index.vue
index 4ef66e6d..6ca977e2 100644
--- a/src/views/media/Device/Channel/index.vue
+++ b/src/views/media/Device/Channel/index.vue
@@ -8,106 +8,129 @@
         />
 
         <JTable
-            ref="instanceRef"
+            ref="listRef"
             :columns="columns"
-            :request="(e:any) => templateApi.getHistory(e, data.id)"
+            :request="(e:any) => ChannelApi.list(e, route?.query.id as string)"
             :defaultParams="{
                 sorts: [{ name: 'notifyTime', order: 'desc' }],
-                terms: [{ column: 'notifyType$IN', value: data.type }],
             }"
             :params="params"
             model="table"
         >
-            <template #notifyTime="slotProps">
-                {{ moment(slotProps.notifyTime).format('YYYY-MM-DD HH:mm:ss') }}
+            <template #headerTitle>
+                <a-tooltip
+                    v-if="route?.query.type === 'gb28181-2016'"
+                    title="接入方式为GB/T28281时，不支持新增"
+                >
+                    <a-button type="primary" disabled> 新增 </a-button>
+                </a-tooltip>
+                <a-button type="primary" @click="handleAdd" v-else>
+                    新增
+                </a-button>
             </template>
-            <template #state="slotProps">
+            <template #status="slotProps">
                 <a-space>
                     <a-badge
-                        :status="slotProps.state.value"
-                        :text="slotProps.state.text"
+                        :status="
+                            slotProps.status.value === 'online'
+                                ? 'success'
+                                : 'error'
+                        "
+                        :text="slotProps.status.text"
                     ></a-badge>
-                    <AIcon
-                        v-if="slotProps.state.value === 'error'"
-                        type="ExclamationCircleOutlined"
-                        style="color: #1d39c4; cursor: pointer"
-                        @click="handleError(slotProps.errorStack)"
-                    />
                 </a-space>
             </template>
             <template #action="slotProps">
-                <AIcon
-                    type="ExclamationCircleOutlined"
-                    style="color: #1d39c4; cursor: pointer"
-                    @click="handleDetail(slotProps.context)"
-                />
+                <a-space :size="16">
+                    <a-tooltip
+                        v-for="i in getActions(slotProps, 'table')"
+                        :key="i.key"
+                        v-bind="i.tooltip"
+                    >
+                        <a-popconfirm
+                            v-if="i.popConfirm"
+                            v-bind="i.popConfirm"
+                            :disabled="i.disabled"
+                        >
+                            <a-button
+                                :disabled="i.disabled"
+                                style="padding: 0"
+                                type="link"
+                                ><AIcon :type="i.icon"
+                            /></a-button>
+                        </a-popconfirm>
+                        <a-button
+                            style="padding: 0"
+                            type="link"
+                            v-else
+                            @click="i.onClick && i.onClick(slotProps)"
+                        >
+                            <a-button
+                                :disabled="i.disabled"
+                                style="padding: 0"
+                                type="link"
+                                ><AIcon :type="i.icon"
+                            /></a-button>
+                        </a-button>
+                    </a-tooltip>
+                </a-space>
             </template>
         </JTable>
     </page-container>
 </template>
 
 <script setup lang="ts">
-import templateApi from '@/api/notice/template';
-import { PropType } from 'vue';
-import moment from 'moment';
-import { Modal } from 'ant-design-vue';
+import ChannelApi from '@/api/media/channel';
+import type { ActionsType } from '@/components/Table/index.vue';
+import { useMenuStore } from 'store/menu';
+import { message } from 'ant-design-vue';
 
-type Emits = {
-    (e: 'update:visible', data: boolean): void;
-};
-// const emit = defineEmits<Emits>();
-
-const props = defineProps({
-    visible: { type: Boolean, default: false },
-    data: {
-        type: Object as PropType<Partial<Record<string, any>>>,
-        default: () => ({}),
-    },
-});
-
-// const _vis = computed({
-//     get: () => props.visible,
-//     set: (val) => emit('update:visible', val),
-// });
-
-// watch(
-//     () => _vis.value,
-//     (val) => {
-//         if (val) handleSearch({ terms: [] });
-//     },
-// );
+const menuStory = useMenuStore();
+const route = useRoute();
 
 const columns = [
     {
-        title: 'ID',
-        dataIndex: 'id',
-        key: 'id',
+        title: '通道ID',
+        dataIndex: 'channelId',
+        key: 'channelId',
         search: {
             type: 'string',
         },
     },
     {
-        title: '发送时间',
-        dataIndex: 'notifyTime',
-        key: 'notifyTime',
-        scopedSlots: true,
+        title: '名称',
+        dataIndex: 'name',
+        key: 'name',
         search: {
-            type: 'date',
-            handleValue: (v: any) => {
-                return v;
-            },
+            type: 'string',
+        },
+    },
+    {
+        title: '厂商',
+        dataIndex: 'manufacturer',
+        key: 'manufacturer',
+        search: {
+            type: 'string',
+        },
+    },
+    {
+        title: '安装地址',
+        dataIndex: 'address',
+        key: 'address',
+        search: {
+            type: 'string',
         },
     },
     {
         title: '状态',
-        dataIndex: 'state',
-        key: 'state',
+        dataIndex: 'status',
+        key: 'status',
         scopedSlots: true,
         search: {
             type: 'select',
             options: [
-                { label: '成功', value: 'success' },
-                { label: '失败', value: 'error' },
+                { label: '已连接', value: 'online' },
+                { label: '未连接', value: 'offline' },
             ],
             handleValue: (v: any) => {
                 return v;
@@ -133,41 +156,84 @@ const handleSearch = (e: any) => {
     // console.log('params.value: ', params.value);
 };
 
-/**
- * 查看错误信息
- */
-const handleError = (e: any) => {
-    Modal.info({
-        title: '错误信息',
-        content: h(
-            'p',
-            {
-                style: {
-                    maxHeight: '300px',
-                    overflowY: 'auto',
-                },
-            },
-            JSON.stringify(e),
-        ),
-    });
+const saveVis = ref(false);
+const handleAdd = () => {
+    saveVis.value = true;
 };
-/**
- * 查看详情
- */
-const handleDetail = (e: any) => {
-    Modal.info({
-        title: '详情信息',
-        content: h(
-            'p',
-            {
-                style: {
-                    maxHeight: '300px',
-                    overflowY: 'auto',
+
+const listRef = ref();
+const playVis = ref(false);
+const getActions = (
+    data: Partial<Record<string, any>>,
+    type: 'card' | 'table',
+): ActionsType[] => {
+    if (!data) return [];
+    const actions = [
+        {
+            key: 'edit',
+            text: '编辑',
+            tooltip: {
+                title: '编辑',
+            },
+            icon: 'EditOutlined',
+            onClick: () => {
+                saveVis.value = true;
+            },
+        },
+        {
+            key: 'play',
+            text: '播放',
+            tooltip: {
+                title: '播放',
+            },
+            icon: 'VideoCameraOutlined',
+            onClick: () => {
+                playVis.value = true;
+            },
+        },
+        {
+            key: 'backPlay',
+            text: '回放',
+            tooltip: {
+                title: '回放',
+            },
+            icon: 'HistoryOutlined',
+            onClick: () => {
+                menuStory.jumpPage(
+                    'media/Device/Playback',
+                    {},
+                    {
+                        id: route.query.id,
+                        type: route.query.type,
+                        channelId: data.channelId,
+                    },
+                );
+            },
+        },
+        {
+            key: 'delete',
+            text: '删除',
+            tooltip: {
+                title: '删除',
+            },
+            popConfirm: {
+                title: '确认删除?',
+                onConfirm: async () => {
+                    const resp = await ChannelApi.del(data.id);
+                    if (resp.status === 200) {
+                        message.success('操作成功！');
+                        listRef.value?.reload();
+                    } else {
+                        message.error('操作失败！');
+                    }
                 },
             },
-            JSON.stringify(e),
-        ),
-    });
+            icon: 'DeleteOutlined',
+        },
+    ];
+    return route?.query.type === 'gb28181-2016'
+        ? actions.filter((f) => f.key !== 'delete')
+        : actions;
 };
 </script>
 
diff --git a/src/views/media/Device/Playback/index.vue b/src/views/media/Device/Playback/index.vue
new file mode 100644
index 00000000..e0d2ef94
--- /dev/null
+++ b/src/views/media/Device/Playback/index.vue
@@ -0,0 +1,7 @@
+<template>
+    <page-container> 回放 </page-container>
+</template>
+
+<script setup lang="ts"></script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/media/Device/Playback/typings.d.ts b/src/views/media/Device/Playback/typings.d.ts
new file mode 100644
index 00000000..5f8a6c5d
--- /dev/null
+++ b/src/views/media/Device/Playback/typings.d.ts
@@ -0,0 +1,15 @@
+export type recordsItemType = {
+    channelId: string;
+    deviceId: string;
+    endTime: number;
+    fileSize: number;
+    name: string;
+    secrecy: string;
+    startTime: number;
+    mediaEndTime: number;
+    mediaStartTime: number;
+    filePath: string;
+    type: string;
+    id: string;
+    isServer?: boolean;
+};

From 89e12712060fef0d0f10955e07fa411ec03c6b75 Mon Sep 17 00:00:00 2001
From: JiangQiming <291854119@qq.com>
Date: Mon, 27 Feb 2023 16:13:49 +0800
Subject: [PATCH 5/5] fix: bug#10229

---
 src/views/notice/Template/Detail/index.vue | 52 ++++++++++++----------
 1 file changed, 29 insertions(+), 23 deletions(-)

diff --git a/src/views/notice/Template/Detail/index.vue b/src/views/notice/Template/Detail/index.vue
index d16395f3..0d31a97d 100644
--- a/src/views/notice/Template/Detail/index.vue
+++ b/src/views/notice/Template/Detail/index.vue
@@ -670,33 +670,38 @@
                                 </div>
                             </a-form-item>
                         </template>
-                        <a-form-item
+                        <template
                             v-if="
                                 formData.type !== 'webhook' &&
                                 formData.type !== 'voice'
                             "
-                            v-bind="validateInfos['template.message']"
                         >
-                            <template #label>
-                                <span>
-                                    模版内容
-                                    <a-tooltip title="发送的内容，支持录入变量">
-                                        <AIcon
-                                            type="QuestionCircleOutlined"
-                                            style="margin-left: 2px"
-                                        />
-                                    </a-tooltip>
-                                </span>
-                            </template>
-                            <a-textarea
-                                v-model:value="formData.template.message"
-                                :maxlength="200"
-                                :rows="5"
-                                :disabled="formData.type === 'sms'"
-                                placeholder="变量格式:${name};
+                            <a-form-item
+                                v-bind="validateInfos['template.message']"
+                            >
+                                <template #label>
+                                    <span>
+                                        模版内容
+                                        <a-tooltip
+                                            title="发送的内容，支持录入变量"
+                                        >
+                                            <AIcon
+                                                type="QuestionCircleOutlined"
+                                                style="margin-left: 2px"
+                                            />
+                                        </a-tooltip>
+                                    </span>
+                                </template>
+                                <a-textarea
+                                    v-model:value="formData.template.message"
+                                    :maxlength="200"
+                                    :rows="5"
+                                    :disabled="formData.type === 'sms'"
+                                    placeholder="变量格式:${name};
     示例:尊敬的${name},${time}有设备触发告警,请注意处理"
-                            />
-                        </a-form-item>
+                                />
+                            </a-form-item>
+                        </template>
                         <a-form-item
                             label="变量列表"
                             v-if="
@@ -804,6 +809,7 @@ const formData = ref<TemplateFormData>({
  * 重置字段值
  */
 const resetPublicFiles = () => {
+    formData.value.template = {};
     switch (formData.value.provider) {
         case 'dingTalkMessage':
             formData.value.template.agentId = '';
@@ -854,6 +860,7 @@ const resetPublicFiles = () => {
     formData.value.configId = undefined;
     formData.value.variableDefinitions = [];
     handleMessageTypeChange();
+    // console.log('formData.value.template: ', formData.value.template);
 };
 
 // 根据通知方式展示对应的字段
@@ -1049,7 +1056,7 @@ const handleMessageTypeChange = () => {
         };
     }
     formData.value.variableDefinitions = [];
-    formData.value.template.message = '';
+    // formData.value.template.message = '';
 };
 
 /**
@@ -1085,7 +1092,6 @@ const handleTypeChange = () => {
     setTimeout(() => {
         formData.value.template =
             TEMPLATE_FIELD_MAP[formData.value.type][formData.value.provider];
-        // console.log('formData.value.template: ', formData.value.template);
         resetPublicFiles();
     }, 0);
 };