feat: 视频设备-新增编辑

src/api/media/device.ts

@@ -1,4 +1,5 @@
 import server from '@/utils/request'
+import type { ProductType } from '@/views/media/Device/typings';
 
 export default {
     // 列表
@@ -10,4 +11,16 @@ export default {
     // 修改
     update: (data: any) => server.put(`/media/device/${data.channel}/${data.id}`, data),
     del: (id: string) => server.remove(`/media/device/${id}`),
+    // 更新通道
+    updateChannels: (id: string) => server.post(`/media/device/${id}/channels/_sync`),
+    // 查询产品列表
+    queryProductList: (data: any) => server.post<ProductType[]>(`/device/product/_query/no-paging`, data),
+    // 快速添加产品
+    saveProduct: (data: any) => server.post<any>(`/device/product`, data),
+    // 产品发布
+    deployProductById: (id: string) => server.post<any>(`/device/product/${id}/deploy`),
+    // 查询设备接入配置
+    queryProvider: (data?: any) => server.post<any>(`/gateway/device/detail/_query`, data),
+    // 查询网关配置
+    getConfiguration: (id: string, transport: string) => server.get<any>(`/protocol/${id}/${transport}/configuration`),
 }

src/components/JUpload/index.vue

@@ -10,7 +10,7 @@
                 @change="handleChange"
                 :action="FILE_UPLOAD"
                 :headers="{
-                    'X-Access-Token': LocalStore.get(TOKEN_KEY)
+                    'X-Access-Token': LocalStore.get(TOKEN_KEY),
                 }"
                 v-bind="props"
             >
@@ -26,8 +26,23 @@
                         <div class="upload-image-mask">点击修改</div>
                     </template>
                     <template v-else>
-                        <AIcon type="LoadingOutlined" v-if="loading" style="font-size: 20px" />
+                        <AIcon
-                        <AIcon v-else type="PlusOutlined" style="font-size: 20px" />
+                            type="LoadingOutlined"
+                            v-if="loading"
+                            style="font-size: 20px"
+                        />
+                        <template v-else-if="bgImage">
+                            <div
+                                class="upload-image"
+                                :style="`background-image: url(${bgImage});`"
+                            ></div>
+                            <div class="upload-image-mask">点击修改</div>
+                        </template>
+                        <AIcon
+                            v-else
+                            type="PlusOutlined"
+                            style="font-size: 20px"
+                        />
                     </template>
                 </div>
             </a-upload>
@@ -41,8 +56,8 @@
 
 <script lang="ts" setup>
 import { message, UploadChangeParam, UploadProps } from 'ant-design-vue';
-import { FILE_UPLOAD } from '@/api/comm'
+import { FILE_UPLOAD } from '@/api/comm';
-import { TOKEN_KEY  } from '@/utils/variable';
+import { TOKEN_KEY } from '@/utils/variable';
 import { LocalStore } from '@/utils/comm';
 import { CSSProperties } from 'vue';
 
@@ -56,6 +71,7 @@ interface JUploadProps extends UploadProps {
     errorMessage?: string;
     size?: number;
     style?: CSSProperties;
+    bgImage?: string;
 }
 
 const emit = defineEmits<Emits>();
@@ -63,55 +79,62 @@ const emit = defineEmits<Emits>();
 const props: JUploadProps = defineProps({
     modelValue: {
         type: String,
-        default: ''
+        default: '',
     },
     disabled: {
         type: Boolean,
-        default: false
+        default: false,
     },
-})
+    bgImage: {
+        type: String,
+        default: '',
+    },
+});
 
-const loading = ref<boolean>(false)
+const loading = ref<boolean>(false);
-const imageUrl = ref<string>(props?.modelValue || '')
+const imageUrl = ref<string>(props?.modelValue || '');
 const imageTypes = props.types ? props.types : ['image/jpeg', 'image/png'];
 
-watch(() => props.modelValue,
+watch(
-(newValue)=> {
+    () => props.modelValue,
-  console.log(newValue)
+    (newValue) => {
-  imageUrl.value = newValue
+        console.log(newValue);
-}, {
+        imageUrl.value = newValue;
-  deep: true,
+    },
-  immediate: true
+    {
-})
+        deep: true,
+        immediate: true,
+    },
+);
 
 const handleChange = (info: UploadChangeParam) => {
-      if (info.file.status === 'uploading') {
+    if (info.file.status === 'uploading') {
         loading.value = true;
-      }
+    }
-      if (info.file.status === 'done') {
+    if (info.file.status === 'done') {
-        imageUrl.value = info.file.response?.result
+        imageUrl.value = info.file.response?.result;
         loading.value = false;
-        emit('update:modelValue', info.file.response?.result)
+        emit('update:modelValue', info.file.response?.result);
-      }
+    }
-      if (info.file.status === 'error') {
+    if (info.file.status === 'error') {
         loading.value = false;
         message.error('上传失败');
-      }
+    }
 };
 
 const beforeUpload = (file: UploadProps['fileList'][number]) => {
-      const isType = imageTypes.includes(file.type);
+    const isType = imageTypes.includes(file.type);
-      if (!isType) {
+    if (!isType) {
-      if (props.errorMessage) {
+        if (props.errorMessage) {
-        message.error(props.errorMessage);
+            message.error(props.errorMessage);
-      } else {
+        } else {
-        message.error(`请上传正确格式的图片`);
+            message.error(`请上传正确格式的图片`);
-      }
+        }
-      return false;
+        return false;
     }
     const isSize = file.size / 1024 / 1024 < (props.size || 4);
     if (!isSize) {
-      message.error(`图片大小必须小于${props.size || 4}M`);
+        message.error(`图片大小必须小于${props.size || 4}M`);
     }
     return isType && isSize;
 };
@@ -124,88 +147,88 @@ const beforeUpload = (file: UploadProps['fileList'][number]) => {
 @height: 150px;
 
 .flex-center() {
-  align-items: center;
+    align-items: center;
-  justify-content: center;
+    justify-content: center;
 }
 
 .upload-image-warp {
-  display: flex;
+    display: flex;
-  justify-content: flex-start;
+    justify-content: flex-start;
 
-  .upload-image-border {
+    .upload-image-border {
-    position: relative;
+        position: relative;
-    width: @with;
+        width: @with;
-    height: @height;
+        height: @height;
-    overflow: hidden;
+        overflow: hidden;
-    //border-radius: 50%;
+        //border-radius: 50%;
-    // border: @border;
+        // border: @border;
-    transition: all 0.3s;
+        transition: all 0.3s;
 
-    &:hover {
+        &:hover {
-      border-color: @primary-color-hover;
+            border-color: @primary-color-hover;
+        }
+
+        :deep(.ant-upload-picture-card-wrapper) {
+            width: 100%;
+            height: 100%;
+        }
+        :deep(.ant-upload) {
+            width: 100%;
+            height: 100%;
+        }
+
+        .upload-image-content {
+            .flex-center();
+
+            position: relative;
+            display: flex;
+            flex-direction: column;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(#000, 0.06);
+            cursor: pointer;
+            padding: 8px;
+
+            .upload-image-mask {
+                .flex-center();
+
+                position: absolute;
+                top: 0;
+                left: 0;
+                display: none;
+                width: 100%;
+                height: 100%;
+                color: #fff;
+                font-size: 16px;
+                background-color: @mask-color;
+            }
+
+            .upload-image {
+                width: 100%;
+                height: 100%;
+                //border-radius: 50%;
+                background-repeat: no-repeat;
+                background-position: center;
+                background-size: cover;
+            }
+
+            &:hover .upload-image-mask {
+                display: flex;
+            }
+        }
     }
 
-    :deep(.ant-upload-picture-card-wrapper) {
+    .upload-loading-mask {
-        width: 100%;
-        height: 100%;
-    }
-    :deep(.ant-upload) {
-        width: 100%;
-        height: 100%;
-    }
-
-    .upload-image-content {
-      .flex-center();
-
-      position: relative;
-      display: flex;
-      flex-direction: column;
-      width: 100%;
-      height: 100%;
-      background-color: rgba(#000, 0.06);
-      cursor: pointer;
-      padding: 8px;
-
-      .upload-image-mask {
         .flex-center();
 
         position: absolute;
         top: 0;
         left: 0;
-        display: none;
+        display: flex;
         width: 100%;
         height: 100%;
         color: #fff;
-        font-size: 16px;
         background-color: @mask-color;
-      }
-
-      .upload-image {
-        width: 100%;
-        height: 100%;
-        //border-radius: 50%;
-        background-repeat: no-repeat;
-        background-position: center;
-        background-size: cover;
-      }
-
-      &:hover .upload-image-mask {
-        display: flex;
-      }
     }
-  }
-
-  .upload-loading-mask {
-    .flex-center();
-
-    position: absolute;
-    top: 0;
-    left: 0;
-    display: flex;
-    width: 100%;
-    height: 100%;
-    color: #fff;
-    background-color: @mask-color;
-  }
 }
-</style>
+</style>

src/views/media/Device/Save/SaveProduct.vue

@@ -0,0 +1,282 @@
+<template>
+    <a-modal
+        v-model:visible="_vis"
+        title="快速添加"
+        cancelText="取消"
+        okText="确定"
+        @ok="handleOk"
+        @cancel="handleCancel"
+        :confirmLoading="btnLoading"
+        width="660px"
+    >
+        <a-form layout="vertical">
+            <a-form-item label="产品名称" v-bind="validateInfos.name">
+                <a-input
+                    v-model:value="formData.name"
+                    placeholder="请输入名称"
+                />
+            </a-form-item>
+            <template v-if="channel === 'gb28181-2016' && formData.accessId">
+                <a-form-item
+                    label="接入密码"
+                    v-bind="validateInfos['configuration.access_pwd']"
+                >
+                    <a-input-password
+                        v-model:value="formData.configuration.access_pwd"
+                        placeholder="请输入接入密码"
+                    />
+                </a-form-item>
+                <a-form-item label="流传输模式">
+                    <a-select
+                        v-model:value="formData.configuration.stream_mode"
+                        placeholder="请选择流传输模式"
+                        :options="streamMode"
+                    />
+                </a-form-item>
+            </template>
+            <a-form-item label="接入网关" v-bind="validateInfos.accessId">
+                <div class="gateway-box">
+                    <div v-if="!gatewayList.length">
+                        暂无数据，请先
+                        <a-button type="link">
+                            添加{{ providerType[props.channel] }} 接入网关
+                        </a-button>
+                    </div>
+                    <div
+                        class="gateway-item"
+                        v-for="(item, index) in gatewayList"
+                        :key="index"
+                    >
+                        <CardBox
+                            @click="handleClick"
+                            :active="_selectedRowKeys.includes(item.id)"
+                            :value="item"
+                            v-bind="item"
+                            :status="item.state?.value"
+                            :statusText="item.state?.text"
+                            :statusNames="{
+                                online: 'enabled',
+                                offline: 'disabled',
+                            }"
+                        >
+                            <template #img>
+                                <slot name="img">
+                                    <img
+                                        :src="getImage('/device-access.png')"
+                                    />
+                                </slot>
+                            </template>
+                            <template #content>
+                                <h3 class="card-item-content-title">
+                                    {{ item.name }}
+                                </h3>
+                                <div class="desc">{{ item.description }}</div>
+                                <a-row v-if="props.channel === 'gb28181-2016'">
+                                    <a-col :span="12">
+                                        {{ item.channelInfo?.name }}
+                                    </a-col>
+                                    <a-col :span="12">
+                                        {{ item.protocolDetail.name }}
+                                    </a-col>
+                                    <a-col :span="12">
+                                        <p
+                                            v-for="(i, idx) in item.channelInfo
+                                                ?.addresses"
+                                            :key="`${i.address}_address${idx}`"
+                                        >
+                                            <a-badge
+                                                :text="i.address"
+                                                :color="
+                                                    i.health === -1
+                                                        ? 'red'
+                                                        : 'green'
+                                                "
+                                            />
+                                        </p>
+                                    </a-col>
+                                </a-row>
+                                <a-row v-else>
+                                    <a-col :span="24">
+                                        <div class="subtitle">
+                                            {{ item.protocolDetail.name }}
+                                        </div>
+                                        <p>
+                                            {{
+                                                item.protocolDetail.description
+                                            }}
+                                        </p>
+                                    </a-col>
+                                </a-row>
+                            </template>
+                        </CardBox>
+                    </div>
+                </div>
+            </a-form-item>
+        </a-form>
+    </a-modal>
+</template>
+
+<script setup lang="ts">
+import { Form, message } from 'ant-design-vue';
+import { PropType } from 'vue';
+import { streamMode } from '@/views/media/Device/const';
+import DeviceApi from '@/api/media/device';
+import { getImage } from '@/utils/comm';
+import { gatewayType } from '@/views/media/Device/typings';
+import { providerType } from '../const';
+
+const useForm = Form.useForm;
+
+type Emits = {
+    (e: 'update:visible', data: boolean): void;
+    (e: 'update:productId', data: string): void;
+    (e: 'close'): void;
+};
+const emit = defineEmits<Emits>();
+
+const props = defineProps({
+    visible: { type: Boolean, default: false },
+    productId: { type: String, default: '' },
+    channel: { type: String, default: '' },
+});
+
+const _vis = computed({
+    get: () => props.visible,
+    set: (val) => emit('update:visible', val),
+});
+
+/**
+ * 获取接入网关
+ */
+const gatewayList = ref<gatewayType[]>([]);
+const getGatewayList = async () => {
+    const params = {
+        pageSize: 100,
+        sorts: [{ name: 'createTime', order: 'desc' }],
+        terms: [{ column: 'provider', value: props.channel }],
+    };
+    const { result } = await DeviceApi.queryProvider(params);
+    gatewayList.value = result.data;
+};
+
+/**
+ * 点击接入网关, 获取对应配置
+ * @param e
+ */
+const _selectedRowKeys = ref<string[]>([]);
+const handleClick = async (e: any) => {
+    _selectedRowKeys.value = [e.id];
+    formData.value.accessId = e.id;
+    formData.value.accessName = e.name;
+    formData.value.accessProvider = e.provider;
+    formData.value.messageProtocol = e.provider;
+    formData.value.protocolName = e.protocolDetail.name;
+    formData.value.transportProtocol = e.transport;
+
+    const { result } = await DeviceApi.getConfiguration(
+        props.channel,
+        e.transport,
+    );
+    console.log('result: ', result);
+};
+
+watch(
+    () => _vis.value,
+    (val) => {
+        if (val) {
+            getGatewayList();
+
+            formRules.value['configuration.access_pwd'][0].required =
+                props.channel === 'gb28181-2016';
+            validate();
+        } else {
+            emit('close');
+        }
+    },
+);
+
+// 表单数据
+const formData = ref({
+    accessId: '',
+    accessName: '',
+    accessProvider: '',
+    configuration: {
+        access_pwd: '',
+        stream_mode: 'UDP',
+    },
+    deviceType: 'device',
+    messageProtocol: '',
+    name: '',
+    protocolName: '',
+    transportProtocol: '',
+});
+
+// 验证规则
+const formRules = ref({
+    name: [{ required: true, message: '请输入产品名称' }],
+    'configuration.access_pwd': [{ required: true, message: '请输入接入密码' }],
+    accessId: [{ required: true, message: '请选择接入网关' }],
+});
+
+const { resetFields, validate, validateInfos, clearValidate } = useForm(
+    formData.value,
+    formRules.value,
+);
+
+/**
+ * 提交
+ */
+const btnLoading = ref(false);
+const handleOk = () => {
+    // console.log('formData.value: ', formData.value);
+    validate()
+        .then(async () => {
+            btnLoading.value = true;
+            const res = await DeviceApi.saveProduct(formData.value);
+            if (res.success) {
+                emit('update:productId', res.result.id);
+                const deployResp = await DeviceApi.deployProductById(
+                    res.result.id,
+                );
+                if (deployResp.success) {
+                    message.success('操作成功');
+                    handleCancel();
+                }
+            }
+            btnLoading.value = false;
+        })
+        .catch((err) => {
+            console.log('err: ', err);
+        });
+};
+
+const handleCancel = () => {
+    _vis.value = false;
+    resetFields();
+};
+</script>
+
+<style lang="less" scoped>
+.gateway-box {
+    max-height: 450px;
+    overflow-y: auto;
+    text-align: center;
+    .gateway-item {
+        padding: 16px;
+        .card-item-content-title,
+        .desc,
+        .subtitle {
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+        }
+        .desc,
+        .subtitle {
+            margin-top: 10px;
+            color: #666;
+            font-weight: 400;
+            font-size: 12px;
+        }
+    }
+}
+</style>

src/views/media/Device/Save/index.vue

@@ -13,82 +13,18 @@
                                 layout="horizontal"
                                 :options="PROVIDER_OPTIONS"
                                 :checkStyle="true"
-                                :disabled="!!formData.id"
+                                :disabled="!!route.query.id"
                                 v-model="formData.channel"
                             />
                         </a-form-item>
                         <a-row :gutter="24">
                             <a-col :span="8">
-                                <!-- <div class="upload-image-warp-logo">
+                                <JUpload
-                                    <div class="upload-image-border-logo">
+                                    v-model:modelValue="formData.photoUrl"
-                                        <a-upload
+                                    :bgImage="formData.photoUrl"
-                                            name="file"
+                                />
-                                            :action="FILE_UPLOAD"
-                                            :headers="{
-                                                [TOKEN_KEY]:
-                                                    LocalStore.get(TOKEN_KEY),
-                                            }"
-                                            :showUploadList="false"
-                                            accept="image/jpeg', 'image/png"
-                                        >
-                                            <div
-                                                class="upload-image-content-logo"
-                                            >
-                                                <div
-                                                    class="loading-logo"
-                                                    v-if="form.logoLoading"
-                                                >
-                                                    <LoadingOutlined
-                                                        style="font-size: 28px"
-                                                    />
-                                                </div>
-                                                <div
-                                                    class="upload-image"
-                                                    style="height: 100%"
-                                                    v-if="formValue.logo"
-                                                    :style="
-                                                        formValue.logo
-                                                            ? `background-image: url(${formValue.logo});`
-                                                            : ''
-                                                    "
-                                                ></div>
-                                                <div
-                                                    v-if="formValue.logo"
-                                                    class="upload-image-mask"
-                                                >
-                                                    点击修改
-                                                </div>
-                                                <div v-else>
-                                                    <div
-                                                        v-if="form.logoLoading"
-                                                    >
-                                                        <LoadingOutlined
-                                                            style="
-                                                                font-size: 28px;
-                                                            "
-                                                        />
-                                                    </div>
-                                                    <div v-else>
-                                                        <PlusOutlined
-                                                            style="
-                                                                font-size: 28px;
-                                                            "
-                                                        />
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </a-upload>
-                                        <div v-if="form.logoLoading">
-                                            <div class="upload-loading-mask">
-                                                <LoadingOutlined
-                                                    style="font-size: 28px"
-                                                />
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div> -->
                             </a-col>
-                            <a-col :span="12">
+                            <a-col :span="16">
                                 <a-form-item
                                     label="ID"
                                     v-bind="validateInfos.id"
@@ -96,6 +32,7 @@
                                     <a-input
                                         v-model:value="formData.id"
                                         placeholder="请输入"
+                                        :disabled="!!route.query.id"
                                     />
                                 </a-form-item>
                                 <a-form-item
@@ -113,31 +50,78 @@
                             label="所属产品"
                             v-bind="validateInfos.productId"
                         >
-                            <div>
+                            <a-row :gutter="[0, 10]">
-                                <a-select
+                                <a-col :span="22">
-                                    v-model:value="formData.productId"
+                                    <a-select
-                                    placeholder="请选择所属产品"
+                                        v-model:value="formData.productId"
-                                >
+                                        placeholder="请选择所属产品"
-                                    <!-- <a-select-option
+                                        :disabled="!!route.query.id"
-                                    v-for="(item, index) in NOTICE_METHOD"
+                                    >
-                                    :key="index"
+                                        <a-select-option
-                                    :value="item.value"
+                                            v-for="(item, index) in productList"
-                                >
+                                            :key="index"
-                                    {{ item.label }}
+                                            :value="item.id"
-                                </a-select-option> -->
+                                        >
-                                </a-select>
+                                            {{ item.name }}
-                                <AIcon type="PlusCircleOutlined" />
+                                        </a-select-option>
-                            </div>
+                                    </a-select>
+                                </a-col>
+                                <a-col :span="2">
+                                    <a-button
+                                        type="link"
+                                        @click="saveProductVis = true"
+                                    >
+                                        <AIcon type="PlusOutlined" />
+                                    </a-button>
+                                </a-col>
+                            </a-row>
                         </a-form-item>
                         <a-form-item
                             label="接入密码"
                             v-bind="validateInfos['others.access_pwd']"
+                            v-if="formData.channel === 'gb28181-2016'"
                         >
                             <a-input-password
                                 v-model:value="formData.others.access_pwd"
                                 placeholder="请输入接入密码"
                             />
                         </a-form-item>
+                        <template v-if="!!route.query.id">
+                            <a-form-item
+                                label="流传输模式"
+                                v-bind="validateInfos.streamMode"
+                            >
+                                <a-radio-group
+                                    button-style="solid"
+                                    v-model:value="formData.streamMode"
+                                >
+                                    <a-radio-button value="UDP">
+                                        UDP
+                                    </a-radio-button>
+                                    <a-radio-button value="TCP_PASSIVE">
+                                        TCP被动
+                                    </a-radio-button>
+                                </a-radio-group>
+                            </a-form-item>
+                            <a-form-item label="设备厂商">
+                                <a-input
+                                    v-model:value="formData.manufacturer"
+                                    placeholder="请输入设备厂商"
+                                />
+                            </a-form-item>
+                            <a-form-item label="设备型号">
+                                <a-input
+                                    v-model:value="formData.model"
+                                    placeholder="请输入设备型号"
+                                />
+                            </a-form-item>
+                            <a-form-item label="固件版本">
+                                <a-input
+                                    v-model:value="formData.firmware"
+                                    placeholder="请输入固件版本"
+                                />
+                            </a-form-item>
+                        </template>
 
                         <a-form-item label="说明">
                             <a-textarea
@@ -250,6 +234,13 @@
                 </a-col>
             </a-row>
         </a-card>
+
+        <SaveProduct
+            v-model:visible="saveProductVis"
+            v-model:productId="formData.productId"
+            :channel="formData.channel"
+            @close="getProductList"
+        />
     </div>
 </template>
 
@@ -258,12 +249,11 @@ import { getImage } from '@/utils/comm';
 import { Form } from 'ant-design-vue';
 import { message } from 'ant-design-vue';
 
-import templateApi from '@/api/notice/template';
+import DeviceApi from '@/api/media/device';
 
-import { FILE_UPLOAD } from '@/api/comm';
-import { LocalStore } from '@/utils/comm';
-import { TOKEN_KEY } from '@/utils/variable';
 import { PROVIDER_OPTIONS } from '@/views/media/Device/const';
+import type { ProductType } from '@/views/media/Device/typings';
+import SaveProduct from './SaveProduct.vue';
 
 const router = useRouter();
 const route = useRoute();
@@ -274,18 +264,26 @@ const formData = ref({
     id: '',
     name: '',
     channel: 'gb28181-2016',
-    photoUrl: '',
+    photoUrl: getImage('/device-media.png'),
     productId: '',
     others: {
         access_pwd: '',
     },
     description: '',
+    // 编辑字段
+    streamMode: 'UDP',
+    manufacturer: '',
+    model: '',
+    firmware: '',
 });
 
 // 验证规则
 const formRules = ref({
     id: [
-        { required: true, message: '请输入ID' },
+        {
+            required: true,
+            message: '请输入ID',
+        },
         { max: 64, message: '最多输入64个字符' },
         {
             pattern: /^[a-zA-Z0-9_\-]+$/,
@@ -300,8 +298,20 @@ const formRules = ref({
     channel: [{ required: true, message: '请选择接入方式' }],
     'others.access_pwd': [{ required: true, message: '请输入接入密码' }],
     description: [{ max: 200, message: '最多可输入200个字符' }],
+    streamMode: [{ required: true, message: '请选择流传输模式' }],
 });
 
+watch(
+    () => formData.value.channel,
+    (val) => {
+        formRules.value['id'][0].required = val === 'gb28181-2016';
+        formRules.value['others.access_pwd'][0].required =
+            val === 'gb28181-2016';
+        validate();
+        getProductList();
+    },
+);
+
 const { resetFields, validate, validateInfos, clearValidate } = useForm(
     formData.value,
     formRules.value,
@@ -309,36 +319,64 @@ const { resetFields, validate, validateInfos, clearValidate } = useForm(
 
 const clearValid = () => {
     setTimeout(() => {
-        formData.value.variableDefinitions = [];
         clearValidate();
     }, 200);
 };
 
+/**
+ * 获取所属产品
+ */
+const productList = ref<ProductType[]>([]);
+const getProductList = async () => {
+    // console.log('formData.productId: ', formData.value.productId);
+    const params = {
+        paging: false,
+        sorts: [{ name: 'createTime', order: 'desc' }],
+        terms: [
+            { column: 'accessProvider', value: formData.value.channel },
+            { column: 'state', value: 1 },
+        ],
+    };
+    const { result } = await DeviceApi.queryProductList(params);
+    productList.value = result;
+};
+getProductList();
+
+/**
+ * 新增产品
+ */
+const saveProductVis = ref(false);
+
 /**
  * 获取详情
  */
 const getDetail = async () => {
-    const res = await templateApi.detail(route.params.id as string);
+    const res = await DeviceApi.detail(route.query.id as string);
     // console.log('res: ', res);
     formData.value = res.result;
-    // console.log('formData.value: ', formData.value);
+    formData.value.channel = res.result.provider;
+    console.log('formData.value: ', formData.value);
+    // validate();
 };
-// getDetail();
+
+onMounted(() => {
+    getDetail();
+});
 
 /**
  * 表单提交
  */
 const btnLoading = ref<boolean>(false);
 const handleSubmit = () => {
-    // console.log('formData.value: ', formData.value);
+    console.log('formData.value: ', formData.value);
     validate()
         .then(async () => {
             btnLoading.value = true;
             let res;
-            if (!formData.value.id) {
+            if (!route.query.id) {
-                res = await templateApi.save(formData.value);
+                res = await DeviceApi.save(formData.value);
             } else {
-                res = await templateApi.update(formData.value);
+                res = await DeviceApi.update(formData.value);
             }
             // console.log('res: ', res);
             if (res?.success) {
@@ -360,70 +398,5 @@ const handleSubmit = () => {
 .page-container {
     background: #f0f2f5;
     padding: 24px;
-    .upload-image-warp-logo {
-        display: flex;
-        justify-content: flex-start;
-        .upload-image-border-logo {
-            position: relative;
-            overflow: hidden;
-            border: 1px dashed #d9d9d9;
-            transition: all 0.3s;
-            width: 160px;
-            height: 150px;
-            &:hover {
-                border: 1px dashed #1890ff;
-                display: flex;
-            }
-            .upload-image-content-logo {
-                align-items: center;
-                justify-content: center;
-                position: relative;
-                display: flex;
-                flex-direction: column;
-                width: 160px;
-                height: 150px;
-                padding: 8px;
-                background-color: rgba(0, 0, 0, 0.06);
-                cursor: pointer;
-                .loading-logo {
-                    position: absolute;
-                    top: 50%;
-                }
-                .loading-icon {
-                    position: absolute;
-                }
-                .upload-image {
-                    width: 100%;
-                    height: 100%;
-                    background-repeat: no-repeat;
-                    background-position: 50%;
-                    background-size: cover;
-                }
-                .upload-image-icon {
-                    width: 100%;
-                    height: 100%;
-                    background-repeat: no-repeat;
-                    background-position: 50%;
-                    background-size: inherit;
-                }
-                .upload-image-mask {
-                    align-items: center;
-                    justify-content: center;
-                    position: absolute;
-                    top: 0;
-                    left: 0;
-                    display: none;
-                    width: 100%;
-                    height: 100%;
-                    color: #fff;
-                    font-size: 16px;
-                    background-color: rgba(0, 0, 0, 0.35);
-                }
-                &:hover .upload-image-mask {
-                    display: flex;
-                }
-            }
-        }
-    }
 }
 </style>

src/views/media/Device/const.ts

@@ -1,4 +1,13 @@
 export const PROVIDER_OPTIONS = [
     { label: '固定地址', value: 'fixed-media' },
     { label: 'GB/T28181', value: 'gb28181-2016' },
-]
+]
+export const streamMode = [
+    { label: 'UDP', value: 'UDP' },
+    { label: 'TCP被动', value: 'TCP_PASSIVE' },
+]
+
+export const providerType = {
+    'gb28181-2016': 'GB/T28181',
+    'fixed-media': '固定地址',
+};

src/views/media/Device/index.vue

@@ -135,11 +135,7 @@ import type { ActionsType } from '@/components/Table/index.vue';
 import { message } from 'ant-design-vue';
 import { getImage } from '@/utils/comm';
 import { PROVIDER_OPTIONS } from '@/views/media/Device/const';
-
+import { providerType } from './const';
-const providerType = {
-    'gb28181-2016': 'GB/T28181',
-    'fixed-media': '固定地址',
-};
 
 const router = useRouter();
 

src/views/media/Device/typings.d.ts

@@ -21,4 +21,65 @@ export type DeviceItem = {
     state: State;
     streamMode: string;
     transport: string;
-} & BaseItem;
+} & BaseItem;
+
+export type ProductType = {
+    accessId: string;
+    accessName: string;
+    accessProvider: string;
+    createTime: number;
+    creatorId: string;
+    deviceType: {
+        text: string;
+        value: string;
+    };
+    id: string;
+    messageProtocol: string;
+    metadata: string;
+    modifierId: string;
+    modifyTime: number;
+    name: string;
+    protocolName: string;
+    state: number;
+    transportProtocol: string;
+}
+
+
+type addressesType = {
+    address: string;
+    bad: boolean;
+    disabled: boolean;
+    health: number;
+    ok: boolean;
+}
+export type gatewayType = {
+    channel: string;
+    channelId: string;
+    channelInfo: {
+        id: string;
+        name: string;
+        addresses: addressesType[];
+    };
+    id: string;
+    name: string;
+    protocol: string;
+    protocolDetail: {
+        id: string;
+        name: string;
+        description?: string;
+    };
+    provider: string;
+    state: {
+        text: string;
+        value: string;
+    };
+    transport: string;
+    transportDetail: {
+        id: string;
+        name: string;
+        metadata: string;
+        features: string[];
+        routes: string[];
+    };
+    description?: string;
+}