From 6e34f8c018c07dd9d42edc6300b75eaeb17cfb44 Mon Sep 17 00:00:00 2001
From: jackhoo_98 <jackhoo_98@foxmail.com>
Date: Wed, 18 Jan 2023 10:20:43 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=AE=BE=E5=A4=87=E6=8E=A5=E5=85=A5?=
 =?UTF-8?q?=E7=BD=91=E5=85=B3=20=E9=80=9A=E9=81=93=E7=B1=BB=E8=AE=BE?=
 =?UTF-8?q?=E5=A4=87=E6=8E=A5=E5=85=A5=20modbus=E3=80=81opcua?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/link/AccessConfig/Detail/index.vue  |  32 ++--
 .../AccessConfig/components/Channel/index.vue | 166 ++++++++++++++++++
 .../AccessConfig/components/Media/GB28181.vue |   4 -
 .../AccessConfig/components/Media/index.vue   |  13 +-
 4 files changed, 190 insertions(+), 25 deletions(-)
 create mode 100644 src/views/link/AccessConfig/components/Channel/index.vue

diff --git a/src/views/link/AccessConfig/Detail/index.vue b/src/views/link/AccessConfig/Detail/index.vue
index 5c9b4546..e8c820a4 100644
--- a/src/views/link/AccessConfig/Detail/index.vue
+++ b/src/views/link/AccessConfig/Detail/index.vue
@@ -9,8 +9,13 @@
             </div>
             <div v-else>
                 <div v-if="!id"><a @click="goBack">返回</a></div>
-                <AccessNetwork v-if="showType==='network'" :provider="provider" :data="data" />
-                <Media v-if="showType==='media'" :provider="provider" :data="data" />
+                <AccessNetwork
+                    v-if="showType === 'network'"
+                    :provider="provider"
+                    :data="data"
+                />
+                <Media v-if="showType === 'media'" :provider="provider" />
+                <Channel v-if="showType === 'channel'" :provider="provider" />
             </div>
         </a-card>
     </a-spin>
@@ -22,7 +27,7 @@ import AccessNetwork from '../components/Network.vue';
 import Provider from '../components/Provider/index.vue';
 import { getProviders, detail } from '@/api/link/accessConfig';
 import Media from '../components/Media/index.vue';
-
+import Channel from '../components/Channel/index.vue';
 
 // const router = useRouter();
 const route = useRoute();
@@ -34,14 +39,13 @@ const type = ref(false);
 const loading = ref(true);
 const provider = ref({});
 const data = ref({});
-const showType = ref('')
+const showType = ref('');
 
-const goProviders = (param: object) => {  
-    showType.value = param.type
+const goProviders = (param: object) => {
+    showType.value = param.type;
     provider.value = param;
     type.value = false;
-    console.log(1123,showType.value,param);
-    
+    console.log(1123, showType.value, param);
 };
 
 const goBack = () => {
@@ -59,22 +63,22 @@ const queryProviders = async () => {
         const edge: any[] = [];
         resp.result.map((item) => {
             if (item.id === 'fixed-media' || item.id === 'gb28181-2016') {
-                item.type='media'
+                item.type = 'media';
                 media.push(item);
             } else if (item.id === 'OneNet' || item.id === 'Ctwing') {
-                item.type='cloud'
+                item.type = 'cloud';
                 cloud.push(item);
             } else if (item.id === 'modbus-tcp' || item.id === 'opc-ua') {
-                item.type='channel'
+                item.type = 'channel';
                 channel.push(item);
             } else if (
                 item.id === 'official-edge-gateway' ||
                 item.id === 'edge-child-device'
             ) {
-                item.type='edge'
+                item.type = 'edge';
                 edge.push(item);
             } else {
-                item.type='network'
+                item.type = 'network';
                 network.push(item);
             }
         });
@@ -114,7 +118,7 @@ const queryProviders = async () => {
                 title: '官方接入',
             });
         }
-        dataSource.value = list
+        dataSource.value = list;
     }
 };
 
diff --git a/src/views/link/AccessConfig/components/Channel/index.vue b/src/views/link/AccessConfig/components/Channel/index.vue
new file mode 100644
index 00000000..658c940d
--- /dev/null
+++ b/src/views/link/AccessConfig/components/Channel/index.vue
@@ -0,0 +1,166 @@
+<template>
+    <div class="container">
+        <div v-if="type === 'channel'" class="card-last">
+            <a-row :gutter="[24, 24]">
+                <a-col :span="12">
+                    <title-component data="基本信息" />
+                    <div>
+                        <a-form
+                            :model="formState"
+                            name="basic"
+                            autocomplete="off"
+                            layout="vertical"
+                            @finish="onFinish"
+                        >
+                            <a-form-item
+                                label="名称"
+                                name="name"
+                                :rules="[
+                                    {
+                                        required: true,
+                                        message: '请输入名称',
+                                        trigger: 'blur',
+                                    },
+                                    { max: 64, message: '最多可输入64个字符' },
+                                ]"
+                            >
+                                <a-input
+                                    placeholder="请输入名称"
+                                    v-model:value="formState.name"
+                                />
+                            </a-form-item>
+                            <a-form-item label="说明" name="description">
+                                <a-textarea
+                                    placeholder="请输入说明"
+                                    :rows="4"
+                                    v-model:value="formState.description"
+                                    show-count
+                                    :maxlength="200"
+                                />
+                            </a-form-item>
+                            <a-form-item>
+                                <a-button type="primary" html-type="submit"
+                                    >保存</a-button
+                                >
+                            </a-form-item>
+                        </a-form>
+                    </div>
+                </a-col>
+                <a-col :span="12">
+                    <div class="config-right">
+                        <div class="config-right-item">
+                            <title-component data="配置概览" />
+                            <div class="config-right-item-context">
+                                接入方式：{{ provider.name }}
+                            </div>
+                            <div class="config-right-item-context">
+                                {{ provider.description }}
+                            </div>
+                            <div class="config-right-item-context">
+                                消息协议：{{ provider.id }}
+                            </div>
+                        </div>
+                        <div class="config-right-item">
+                            <title-component data="设备接入指引" />
+                            <div class="config-right-item-context">
+                                1、配置{{ provider.name }}通道
+                            </div>
+                            <div class="config-right-item-context">
+                                2、创建{{ provider.name }}设备接入网关
+                            </div>
+                            <div class="config-right-item-context">
+                                3、创建产品，并选中接入方式为{{ provider.name }}
+                            </div>
+                            <div class="config-right-item-context">
+                                4、添加设备，单独为每一个设备进行数据点绑定
+                            </div>
+                        </div>
+                    </div>
+                </a-col>
+            </a-row>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup name="AccessMedia">
+import { message, Form } from 'ant-design-vue';
+import type { FormInstance } from 'ant-design-vue';
+import { update, save } from '@/api/link/accessConfig';
+
+interface FormState {
+    name: string;
+    description: string;
+}
+const route = useRoute();
+const id = route.query.id;
+
+const props = defineProps({
+    provider: {
+        type: Object,
+        default: () => {},
+    },
+});
+
+const type = ref(props.provider.type);
+
+const formState = reactive<FormState>({
+    name: '',
+    description: '',
+});
+const onFinish = async (values: any) => {
+    const providerId = props.provider.id;
+    const params = {
+        ...values,
+        provider: providerId,
+        protocol: providerId,
+        transport: providerId === 'modbus-tcp' ? 'MODBUS_TCP' : 'OPC_UA',
+        channel: providerId === 'modbus-tcp' ? 'modbus' : 'opc-ua',
+    };
+    const resp = !!id ? await update({ ...params, id }) : await save(params);
+    if (resp.status === 200) {
+        message.success('操作成功！');
+        // if (params.get('save')) {
+        // if ((window as any).onTabSaveSuccess) {
+        //   if (resp.result) {
+        //     (window as any).onTabSaveSuccess(resp.result);
+        //     setTimeout(() => window.close(), 300);
+        //   }
+        // }
+        //   } else {
+        history.back();
+        //   }
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.container {
+    margin: 20px;
+}
+
+.card-last {
+    padding-right: 5px;
+    overflow-y: auto;
+    overflow-x: hidden;
+}
+.config-right {
+    padding: 20px;
+    color: rgba(0, 0, 0, 0.8);
+    background: rgba(0, 0, 0, 0.04);
+
+    .config-right-item {
+        margin-bottom: 10px;
+
+        .config-right-item-title {
+            width: 100%;
+            margin-bottom: 10px;
+            font-weight: 600;
+        }
+
+        .config-right-item-context {
+            margin: 5px 0;
+            color: rgba(0, 0, 0, 0.8);
+        }
+    }
+}
+</style>
diff --git a/src/views/link/AccessConfig/components/Media/GB28181.vue b/src/views/link/AccessConfig/components/Media/GB28181.vue
index b4ad1599..239486ec 100644
--- a/src/views/link/AccessConfig/components/Media/GB28181.vue
+++ b/src/views/link/AccessConfig/components/Media/GB28181.vue
@@ -539,10 +539,6 @@ const props = defineProps({
         type: Object,
         default: () => {},
     },
-    data: {
-        type: Object,
-        default: () => {},
-    },
 });
 
 const route = useRoute();
diff --git a/src/views/link/AccessConfig/components/Media/index.vue b/src/views/link/AccessConfig/components/Media/index.vue
index ed14c126..1f96e91d 100644
--- a/src/views/link/AccessConfig/components/Media/index.vue
+++ b/src/views/link/AccessConfig/components/Media/index.vue
@@ -24,7 +24,10 @@
                                     { max: 64, message: '最多可输入64个字符' },
                                 ]"
                             >
-                                <a-input v-model:value="formState.name" />
+                                <a-input
+                                    placeholder="请输入名称"
+                                    v-model:value="formState.name"
+                                />
                             </a-form-item>
                             <a-form-item label="说明" name="description">
                                 <a-textarea
@@ -68,8 +71,8 @@
                 </a-col>
             </a-row>
         </div>
-        <div v-else>
-            <GB28181 :data="props.data" :provider="props.provider"></GB28181>
+        <div v-else-if="channel === 'gb28181'">
+            <GB28181 :provider="props.provider"></GB28181>
         </div>
     </div>
 </template>
@@ -92,10 +95,6 @@ const props = defineProps({
         type: Object,
         default: () => {},
     },
-    data: {
-        type: Object,
-        default: () => {},
-    },
 });
 
 const channel = ref(props.provider.channel);