Merge remote-tracking branch 'origin/dev' into dev
# Conflicts: # src/components/AIcon/index.tsx
This commit is contained in:
xieyonghong
commit
92c4901750
Binary file not shown.
|
Before Width: | Height: | Size: 78 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 54 KiB After Width: | Height: | Size: 78 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
|
Before Width: | Height: | Size: 67 KiB After Width: | Height: | Size: 67 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 274 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 307 KiB |
|
|
@ -1,4 +1,5 @@
|
||||||
import { patch, post, get, remove } from '@/utils/request'
|
import { patch, post, get, remove } from '@/utils/request'
|
||||||
|
import { TemplateFormData } from '@/views/notice/Template/types'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
// 列表
|
// 列表
|
||||||
|
|
@ -10,8 +11,8 @@ export default {
|
||||||
// 修改
|
// 修改
|
||||||
update: (data: any) => patch(`/notifier/config`, data),
|
update: (data: any) => patch(`/notifier/config`, data),
|
||||||
del: (id: string) => remove(`/notifier/config/${id}`),
|
del: (id: string) => remove(`/notifier/config/${id}`),
|
||||||
getTemplate: (data: any, id: string) => post(`/notifier/template/${id}/_query`, data),
|
getTemplate: (data: any, id: string) => post<TemplateFormData[]>(`/notifier/template/${id}/_query`, data),
|
||||||
getTemplateDetail: (id: string) => get(`/notifier/template/${id}/detail`),
|
getTemplateDetail: (id: string) => get<TemplateFormData>(`/notifier/template/${id}/detail`),
|
||||||
debug: (data: any, configId: string, templateId: string) => post(`/notifier/${configId}/${templateId}/_send`, data),
|
debug: (data: any, configId: string, templateId: string) => post(`/notifier/${configId}/${templateId}/_send`, data),
|
||||||
getHistory: (data: any, id: string) => post(`/notify/history/config/${id}/_query`, data),
|
getHistory: (data: any, id: string) => post(`/notify/history/config/${id}/_query`, data),
|
||||||
// 获取所有平台用户
|
// 获取所有平台用户
|
||||||
|
|
|
||||||
|
|
@ -16,12 +16,12 @@ export default {
|
||||||
debug: (data: any, configId: string, templateId: string) => post(`/notifier/${configId}/${templateId}/_send`, data),
|
debug: (data: any, configId: string, templateId: string) => post(`/notifier/${configId}/${templateId}/_send`, data),
|
||||||
getHistory: (data: any, id: string) => post(`/notify/history/template/${id}/_query`, data),
|
getHistory: (data: any, id: string) => post(`/notify/history/template/${id}/_query`, data),
|
||||||
// 钉钉/微信, 根据配置获取部门和用户
|
// 钉钉/微信, 根据配置获取部门和用户
|
||||||
getDept: (type: string, id: string) => get(`/notifier/${type}/corp/${id}/departments`),
|
getDept: (type: string, id: string) => get<any>(`/notifier/${type}/corp/${id}/departments`),
|
||||||
getUser: (type: string, id: string) => get(`/notifier/${type}/corp/${id}/users`),
|
getUser: (type: string, id: string) => get<any>(`/notifier/${type}/corp/${id}/users`),
|
||||||
// 微信获取标签推送
|
// 微信获取标签推送
|
||||||
getTags: (id: string) => get(`/notifier/wechat/corp/${id}/tags`),
|
getTags: (id: string) => get<any>(`/notifier/wechat/corp/${id}/tags`),
|
||||||
// 语音/短信获取阿里云模板
|
// 语音/短信获取阿里云模板
|
||||||
getAliTemplate: (id: string) => get(`/notifier/sms/aliyun/${id}/templates`),
|
getAliTemplate: (id: any) => get(`/notifier/sms/aliyun/${id}/templates`),
|
||||||
// 短信获取签名
|
// 短信获取签名
|
||||||
getSigns: (id: string) => get(`/notifier/sms/aliyun/${id}/signs`)
|
getSigns: (id: any) => get(`/notifier/sms/aliyun/${id}/signs`)
|
||||||
}
|
}
|
||||||
|
|
@ -28,6 +28,12 @@ const iconKeys = [
|
||||||
'ExclamationCircleOutlined',
|
'ExclamationCircleOutlined',
|
||||||
'UploadOutlined',
|
'UploadOutlined',
|
||||||
'PlusCircleOutlined',
|
'PlusCircleOutlined',
|
||||||
|
'QuestionCircleOutlined',
|
||||||
|
'BugOutlined',
|
||||||
|
'BarsOutlined',
|
||||||
|
'ArrowDownOutlined',
|
||||||
|
'SmallDashOutlined',
|
||||||
|
'TeamOutlined',
|
||||||
'MenuUnfoldOutlined',
|
'MenuUnfoldOutlined',
|
||||||
'MenuFoldOutlined',
|
'MenuFoldOutlined',
|
||||||
'QuestionCircleOutlined',
|
'QuestionCircleOutlined',
|
||||||
|
|
|
||||||
|
|
@ -109,7 +109,7 @@ const props = defineProps({
|
||||||
// 组件类型
|
// 组件类型
|
||||||
itemType: {
|
itemType: {
|
||||||
type: String,
|
type: String,
|
||||||
default: () => 'geoPoint',
|
default: () => 'string',
|
||||||
},
|
},
|
||||||
// 下拉选择框下拉数据
|
// 下拉选择框下拉数据
|
||||||
options: {
|
options: {
|
||||||
|
|
|
||||||
|
|
@ -56,3 +56,20 @@ export const downloadObject = (record: Record<string, any>, fileName: string, fo
|
||||||
};
|
};
|
||||||
// 是否不是community版本
|
// 是否不是community版本
|
||||||
export const isNoCommunity = !(localStorage.getItem(SystemConst.VERSION_CODE) === 'community');
|
export const isNoCommunity = !(localStorage.getItem(SystemConst.VERSION_CODE) === 'community');
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 生成随机数
|
||||||
|
* @param length
|
||||||
|
* @returns
|
||||||
|
*/
|
||||||
|
export const randomString = (length?: number) => {
|
||||||
|
const tempLength = length || 32;
|
||||||
|
const chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
|
||||||
|
const maxPos = chars.length;
|
||||||
|
let pwd = '';
|
||||||
|
for (let i = 0; i < tempLength; i += 1) {
|
||||||
|
pwd += chars.charAt(Math.floor(Math.random() * maxPos));
|
||||||
|
}
|
||||||
|
return pwd;
|
||||||
|
};
|
||||||
|
|
|
||||||
|
|
@ -16,6 +16,12 @@
|
||||||
/>
|
/>
|
||||||
<Media v-if="showType === 'media'" :provider="provider" />
|
<Media v-if="showType === 'media'" :provider="provider" />
|
||||||
<Channel v-if="showType === 'channel'" :provider="provider" />
|
<Channel v-if="showType === 'channel'" :provider="provider" />
|
||||||
|
<Edge v-if="showType === 'edge'" :provider="provider" />
|
||||||
|
<Cloud
|
||||||
|
v-if="showType === 'cloud'"
|
||||||
|
:provider="provider"
|
||||||
|
:data="data"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</a-card>
|
</a-card>
|
||||||
</a-spin>
|
</a-spin>
|
||||||
|
|
@ -28,6 +34,8 @@ import Provider from '../components/Provider/index.vue';
|
||||||
import { getProviders, detail } from '@/api/link/accessConfig';
|
import { getProviders, detail } from '@/api/link/accessConfig';
|
||||||
import Media from '../components/Media/index.vue';
|
import Media from '../components/Media/index.vue';
|
||||||
import Channel from '../components/Channel/index.vue';
|
import Channel from '../components/Channel/index.vue';
|
||||||
|
import Edge from '../components/Edge/index.vue';
|
||||||
|
import Cloud from '../components/Cloud/index.vue';
|
||||||
|
|
||||||
// const router = useRouter();
|
// const router = useRouter();
|
||||||
const route = useRoute();
|
const route = useRoute();
|
||||||
|
|
|
||||||
|
|
@ -82,10 +82,11 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup name="AccessMedia">
|
<script lang="ts" setup name="AccessChannel">
|
||||||
import { message, Form } from 'ant-design-vue';
|
import { message, Form } from 'ant-design-vue';
|
||||||
import type { FormInstance } from 'ant-design-vue';
|
import type { FormInstance } from 'ant-design-vue';
|
||||||
import { update, save } from '@/api/link/accessConfig';
|
import { update, save } from '@/api/link/accessConfig';
|
||||||
|
import { ProtocolMapping } from '../../Detail/data';
|
||||||
|
|
||||||
interface FormState {
|
interface FormState {
|
||||||
name: string;
|
name: string;
|
||||||
|
|
@ -113,7 +114,7 @@ const onFinish = async (values: any) => {
|
||||||
...values,
|
...values,
|
||||||
provider: providerId,
|
provider: providerId,
|
||||||
protocol: providerId,
|
protocol: providerId,
|
||||||
transport: providerId === 'modbus-tcp' ? 'MODBUS_TCP' : 'OPC_UA',
|
transport: ProtocolMapping.get(providerId),
|
||||||
channel: providerId === 'modbus-tcp' ? 'modbus' : 'opc-ua',
|
channel: providerId === 'modbus-tcp' ? 'modbus' : 'opc-ua',
|
||||||
};
|
};
|
||||||
const resp = !!id ? await update({ ...params, id }) : await save(params);
|
const resp = !!id ? await update({ ...params, id }) : await save(params);
|
||||||
|
|
@ -145,8 +146,8 @@ const onFinish = async (values: any) => {
|
||||||
}
|
}
|
||||||
.config-right {
|
.config-right {
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
color: rgba(0, 0, 0, 0.8);
|
// color: rgba(0, 0, 0, 0.8);
|
||||||
background: rgba(0, 0, 0, 0.04);
|
// background: rgba(0, 0, 0, 0.04);
|
||||||
|
|
||||||
.config-right-item {
|
.config-right-item {
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,624 @@
|
||||||
|
<template>
|
||||||
|
<div class="container">
|
||||||
|
<a-steps class="steps-steps" :current="stepCurrent">
|
||||||
|
<a-step v-for="item in steps" :key="item" :title="item" />
|
||||||
|
</a-steps>
|
||||||
|
<div class="steps-content">
|
||||||
|
<div class="steps-box" v-if="current === 0">
|
||||||
|
<div class="alert">
|
||||||
|
<info-circle-outlined />
|
||||||
|
通过CTWing平台的HTTP推送服务进行数据接入
|
||||||
|
</div>
|
||||||
|
<div style="margin-top: 15px">
|
||||||
|
<a-row :gutter="[24, 24]">
|
||||||
|
<a-col :span="16">
|
||||||
|
<a-form
|
||||||
|
:model="formState"
|
||||||
|
ref="formRef1"
|
||||||
|
name="basic"
|
||||||
|
autocomplete="off"
|
||||||
|
layout="vertical"
|
||||||
|
>
|
||||||
|
<a-row :gutter="[24, 24]">
|
||||||
|
<a-col :span="12">
|
||||||
|
<a-form-item
|
||||||
|
label="接口地址"
|
||||||
|
name="apiAddress"
|
||||||
|
:rules="[
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
]"
|
||||||
|
>
|
||||||
|
<a-input
|
||||||
|
disabled
|
||||||
|
v-model:value="
|
||||||
|
formState.apiAddress
|
||||||
|
"
|
||||||
|
/>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="12">
|
||||||
|
<a-form-item
|
||||||
|
label="appKey"
|
||||||
|
name="appKey"
|
||||||
|
:rules="[
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请输入appKey',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
max: 64,
|
||||||
|
message:
|
||||||
|
'最多可输入64个字符',
|
||||||
|
},
|
||||||
|
]"
|
||||||
|
>
|
||||||
|
<a-input
|
||||||
|
v-model:value="formState.appKey"
|
||||||
|
placeholder="请输入appKey"
|
||||||
|
/>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
<a-row :gutter="[24, 24]">
|
||||||
|
<a-col :span="12">
|
||||||
|
<a-form-item
|
||||||
|
label="appSecret"
|
||||||
|
name="appSecret"
|
||||||
|
:rules="[
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请输入appSecret',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
max: 64,
|
||||||
|
message:
|
||||||
|
'最多可输入64个字符',
|
||||||
|
},
|
||||||
|
]"
|
||||||
|
>
|
||||||
|
<a-input
|
||||||
|
v-model:value="
|
||||||
|
formState.appSecret
|
||||||
|
"
|
||||||
|
placeholder="请输入appSecret"
|
||||||
|
/>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="12"> </a-col>
|
||||||
|
</a-row>
|
||||||
|
<a-row :gutter="[24, 24]">
|
||||||
|
<a-col :span="24">
|
||||||
|
<a-form-item
|
||||||
|
label="说明"
|
||||||
|
name="description"
|
||||||
|
>
|
||||||
|
<a-textarea
|
||||||
|
placeholder="请输入说明"
|
||||||
|
:rows="4"
|
||||||
|
v-model:value="
|
||||||
|
formState.description
|
||||||
|
"
|
||||||
|
show-count
|
||||||
|
:maxlength="200"
|
||||||
|
/>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
</a-row> </a-form
|
||||||
|
></a-col>
|
||||||
|
<a-col :span="8">
|
||||||
|
<div class="doc">
|
||||||
|
<h1>操作指引：</h1>
|
||||||
|
<div>
|
||||||
|
1、CTWing端创建产品、设备，以及一个第三方应用
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
2、CTWing端配置产品/设备/分组级订阅，订阅方URL地址请填写:
|
||||||
|
<div style="word-wrap: break-word">
|
||||||
|
{{
|
||||||
|
`${origin}/api/ctwing/${randomString()}/notify`
|
||||||
|
}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="image">
|
||||||
|
<a-image width="100%" :src="img1" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
3、IOT端创建类型为CTWing的设备接入网关
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
4、IOT端创建产品，选中接入方式为CTWing,填写CTWing平台中的产品ID、Master-APIkey。
|
||||||
|
</div>
|
||||||
|
<div class="image">
|
||||||
|
<a-image width="100%" :src="img2" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
5、IOT端添加设备，为每一台设备设置唯一的IMEI（需与CTWing平台中填写的值一致）
|
||||||
|
</div>
|
||||||
|
<div class="image">
|
||||||
|
<a-image width="100%" :src="img3" />
|
||||||
|
</div>
|
||||||
|
<h1>设备接入网关配置说明</h1>
|
||||||
|
<div>
|
||||||
|
1.请将CTWing的AEP平台-应用管理中的App
|
||||||
|
Key和App Secret复制到当前页面
|
||||||
|
</div>
|
||||||
|
<div class="image">
|
||||||
|
<a-image width="100%" :src="img4" />
|
||||||
|
</div>
|
||||||
|
<h1>其他说明</h1>
|
||||||
|
<div>
|
||||||
|
1.在IOT端启用设备时，若CTWing平台没有与之对应的设备，则将在CTWing端自动创建新设备
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="steps-content">
|
||||||
|
<div class="steps-box" v-if="current === 1">
|
||||||
|
<div class="alert">
|
||||||
|
<info-circle-outlined />
|
||||||
|
只能选择HTTP通信方式的协议
|
||||||
|
</div>
|
||||||
|
<div class="search">
|
||||||
|
<a-input-search
|
||||||
|
allowClear
|
||||||
|
placeholder="请输入"
|
||||||
|
style="width: 300px"
|
||||||
|
@search="procotolSearch"
|
||||||
|
/>
|
||||||
|
<a-button type="primary" @click="addProcotol"
|
||||||
|
>新增</a-button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="card-item">
|
||||||
|
<a-row :gutter="[24, 24]" v-if="procotolList.length > 0">
|
||||||
|
<a-col
|
||||||
|
:span="8"
|
||||||
|
v-for="item in procotolList"
|
||||||
|
:key="item.id"
|
||||||
|
>
|
||||||
|
<access-card
|
||||||
|
@checkedChange="procotolChange"
|
||||||
|
:checked="procotolCurrent"
|
||||||
|
:data="item"
|
||||||
|
>
|
||||||
|
</access-card>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
<a-empty v-else description="暂无数据" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-if="current === 2" class="card-last">
|
||||||
|
<a-row :gutter="[24, 24]">
|
||||||
|
<a-col :span="12">
|
||||||
|
<title-component data="基本信息" />
|
||||||
|
<div>
|
||||||
|
<a-form
|
||||||
|
:model="form"
|
||||||
|
name="basic"
|
||||||
|
autocomplete="off"
|
||||||
|
layout="vertical"
|
||||||
|
ref="formRef2"
|
||||||
|
>
|
||||||
|
<a-form-item
|
||||||
|
label="名称"
|
||||||
|
name="name"
|
||||||
|
:rules="[
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请输入名称',
|
||||||
|
trigger: 'blur',
|
||||||
|
},
|
||||||
|
{ max: 64, message: '最多可输入64个字符' },
|
||||||
|
]"
|
||||||
|
>
|
||||||
|
<a-input
|
||||||
|
placeholder="请输入名称"
|
||||||
|
v-model:value="form.name"
|
||||||
|
/>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item label="说明" name="description">
|
||||||
|
<a-textarea
|
||||||
|
placeholder="请输入说明"
|
||||||
|
:rows="4"
|
||||||
|
v-model:value="form.description"
|
||||||
|
show-count
|
||||||
|
:maxlength="200"
|
||||||
|
/>
|
||||||
|
</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">
|
||||||
|
消息协议：{{ procotolCurrent }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="config-right-item">
|
||||||
|
<title-component data="设备接入指引" />
|
||||||
|
<div class="config-right-item-context">
|
||||||
|
1、创建类型为{{
|
||||||
|
props?.provider?.id === 'OneNet'
|
||||||
|
? 'OneNet'
|
||||||
|
: 'CTWing'
|
||||||
|
}}的设备接入网关
|
||||||
|
</div>
|
||||||
|
<div class="config-right-item-context">
|
||||||
|
2、创建产品，并选中接入方式为
|
||||||
|
{{
|
||||||
|
props?.provider?.id === 'OneNet'
|
||||||
|
? 'OneNet'
|
||||||
|
: 'CTWing,选中后需填写CTWing平台中的产品ID、Master-APIkey。'
|
||||||
|
}}
|
||||||
|
</div>
|
||||||
|
<div class="config-right-item-context">
|
||||||
|
3、添加设备，为每一台设备设置唯一的IMEI、IMSI码（需与OneNet平台中填写的值一致，若OneNet平台没有对应的设备，将会通过OneNet平台提供的LWM2M协议自动创建）
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</div>
|
||||||
|
<div :class="current !== 2 ? 'steps-action' : 'steps-action-save'">
|
||||||
|
<a-button
|
||||||
|
v-if="[0, 1].includes(current)"
|
||||||
|
type="primary"
|
||||||
|
@click="next"
|
||||||
|
>
|
||||||
|
下一步
|
||||||
|
</a-button>
|
||||||
|
<a-button v-if="current === 2" type="primary" @click="saveData">
|
||||||
|
保存
|
||||||
|
</a-button>
|
||||||
|
<a-button v-if="current > 0" style="margin-left: 8px" @click="prev">
|
||||||
|
上一步
|
||||||
|
</a-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup name="AccessCloudCtwing">
|
||||||
|
import { message, Form } from 'ant-design-vue';
|
||||||
|
import type { FormInstance } from 'ant-design-vue';
|
||||||
|
import { update, save, getNetworkList } from '@/api/link/accessConfig';
|
||||||
|
import { ProtocolMapping, NetworkTypeMapping } from '../../Detail/data';
|
||||||
|
import { InfoCircleOutlined } from '@ant-design/icons-vue';
|
||||||
|
import AccessCard from '../AccessCard/index.vue';
|
||||||
|
import { randomString } from '@/utils/utils';
|
||||||
|
import { getImage } from '@/utils/comm';
|
||||||
|
|
||||||
|
const origin = window.location.origin;
|
||||||
|
const img1 = getImage('/network/01.png');
|
||||||
|
const img2 = getImage('/network/02.jpg');
|
||||||
|
const img3 = getImage('/network/03.png');
|
||||||
|
const img4 = getImage('/network/04.jpg');
|
||||||
|
|
||||||
|
//测试数据1{
|
||||||
|
const resultList1 = [
|
||||||
|
{
|
||||||
|
id: '1612354213444087808',
|
||||||
|
name: '大华烟感协议',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '1610475299002855424',
|
||||||
|
name: '宇视摄像头协议',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '1610466717670780928',
|
||||||
|
name: '官方协议',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '1610205217785524224',
|
||||||
|
name: 'demo协议',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '1610204985806958592',
|
||||||
|
name: '水压协议',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '1605459961693745152',
|
||||||
|
name: '测试设备诊断日志显示',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '1582302200020783104',
|
||||||
|
name: 'demo',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '1581839391887794176',
|
||||||
|
name: '海康闸机协议',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '1567062365030637568',
|
||||||
|
name: '协议20220906160914',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '1561650927208628224',
|
||||||
|
name: 'local',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '1552881998413754368',
|
||||||
|
name: '官方协议V3-支持固件升级3',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '2b283b28a16d61e5fc2bdf39ceff34f8',
|
||||||
|
name: 'JetLinks官方协议',
|
||||||
|
description: 'JetLinks官方协议包',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '1551510679466844160',
|
||||||
|
name: '官方协议3.1',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '1551509716811161600',
|
||||||
|
name: '官方协议3.0',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
interface FormState {
|
||||||
|
apiAddress: string;
|
||||||
|
appKey: string;
|
||||||
|
appSecret: string;
|
||||||
|
description: string;
|
||||||
|
}
|
||||||
|
interface Form {
|
||||||
|
name: string;
|
||||||
|
description: string;
|
||||||
|
}
|
||||||
|
const route = useRoute();
|
||||||
|
const id = route.query.id;
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
provider: {
|
||||||
|
type: Object,
|
||||||
|
default: () => {},
|
||||||
|
},
|
||||||
|
data: {
|
||||||
|
type: Object,
|
||||||
|
default: () => {},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const channel = ref(props.provider.channel);
|
||||||
|
const formRef1 = ref<FormInstance>();
|
||||||
|
const formRef2 = ref<FormInstance>();
|
||||||
|
|
||||||
|
const formState = reactive<FormState>({
|
||||||
|
apiAddress: 'https://ag-api.ctwing.cn/',
|
||||||
|
appKey: '',
|
||||||
|
appSecret: '',
|
||||||
|
description: '',
|
||||||
|
});
|
||||||
|
const form = reactive<Form>({
|
||||||
|
name: '',
|
||||||
|
description: '',
|
||||||
|
});
|
||||||
|
|
||||||
|
const current = ref(0);
|
||||||
|
const stepCurrent = ref(0);
|
||||||
|
const steps = ref(['接入配置', '消息协议', '完成']);
|
||||||
|
const procotolList = ref([]);
|
||||||
|
const allProcotolList = ref([]);
|
||||||
|
const procotolCurrent = ref('');
|
||||||
|
|
||||||
|
const procotolChange = (id: string) => {
|
||||||
|
if (!props.data?.id) {
|
||||||
|
procotolCurrent.value = id;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const procotolSearch = (value: string) => {
|
||||||
|
if (value) {
|
||||||
|
const list = allProcotolList.value.filter((i) => {
|
||||||
|
return (
|
||||||
|
i.name &&
|
||||||
|
i.name.toLocaleLowerCase().includes(value.toLocaleLowerCase())
|
||||||
|
);
|
||||||
|
});
|
||||||
|
procotolList.value = list;
|
||||||
|
} else {
|
||||||
|
procotolList.value = allProcotolList.value;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const saveData = async () => {
|
||||||
|
const data: any = await formRef2.value?.validate();
|
||||||
|
const params = {
|
||||||
|
...data,
|
||||||
|
configuration: {
|
||||||
|
...formState,
|
||||||
|
protocol: procotolCurrent.value,
|
||||||
|
},
|
||||||
|
protocol: procotolCurrent.value,
|
||||||
|
provider: props.provider.id,
|
||||||
|
transport: 'HTTP_SERVER',
|
||||||
|
};
|
||||||
|
const resp =
|
||||||
|
props.data && props.data.id
|
||||||
|
? await update({
|
||||||
|
...props.data,
|
||||||
|
...params,
|
||||||
|
})
|
||||||
|
: await save(params);
|
||||||
|
|
||||||
|
if (resp.status === 200) {
|
||||||
|
message.success('操作成功！');
|
||||||
|
// 回到列表页面
|
||||||
|
// if (window.onTabSaveSuccess) {
|
||||||
|
// window.onTabSaveSuccess(resp);
|
||||||
|
// setTimeout(() => window.close(), 300);
|
||||||
|
// } else {
|
||||||
|
// // this.$store.dispatch('jumpPathByKey', { key: MenuKeys['Link/AccessConfig'] })
|
||||||
|
// }
|
||||||
|
history.back();
|
||||||
|
}
|
||||||
|
// onFinish(data);
|
||||||
|
};
|
||||||
|
|
||||||
|
const queryProcotolList = async (id: string, params = {}) => {
|
||||||
|
// const resp = await getProtocolList(ProtocolMapping.get(id), {
|
||||||
|
// ...params,
|
||||||
|
// 'sorts[0].name': 'createTime',
|
||||||
|
// 'sorts[0].order': 'desc',
|
||||||
|
// });
|
||||||
|
// if (resp.status === 200) {
|
||||||
|
// procotolList.value = resp.result;
|
||||||
|
// allProcotolList.value = resp.result;
|
||||||
|
// }
|
||||||
|
|
||||||
|
//使用测试数据1
|
||||||
|
procotolList.value = resultList1;
|
||||||
|
allProcotolList.value = resultList1;
|
||||||
|
};
|
||||||
|
|
||||||
|
const addProcotol = () => {
|
||||||
|
// const url = this.$store.state.permission.routes['Link/Protocol']
|
||||||
|
const url = '/demo';
|
||||||
|
const tab = window.open(
|
||||||
|
`${window.location.origin + window.location.pathname}#${url}?save=true`,
|
||||||
|
);
|
||||||
|
tab.onTabSaveSuccess = (value) => {
|
||||||
|
if (value.success) {
|
||||||
|
procotolCurrent.value = value.result?.id;
|
||||||
|
queryProcotolList(props.provider?.id);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
const next = async () => {
|
||||||
|
if (current.value === 0) {
|
||||||
|
let data1: any = await formRef1.value?.validate();
|
||||||
|
queryProcotolList(props.provider.id);
|
||||||
|
current.value = current.value + 1;
|
||||||
|
} else if (current.value === 1) {
|
||||||
|
if (!procotolCurrent.value) {
|
||||||
|
message.error('请选择消息协议！');
|
||||||
|
} else {
|
||||||
|
current.value = current.value + 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const prev = () => {
|
||||||
|
current.value = current.value - 1;
|
||||||
|
};
|
||||||
|
|
||||||
|
watch(
|
||||||
|
current,
|
||||||
|
(v) => {
|
||||||
|
stepCurrent.value = v;
|
||||||
|
},
|
||||||
|
{
|
||||||
|
deep: true,
|
||||||
|
immediate: true,
|
||||||
|
},
|
||||||
|
);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.container {
|
||||||
|
margin: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.steps-content {
|
||||||
|
margin: 20px;
|
||||||
|
}
|
||||||
|
.steps-box {
|
||||||
|
min-height: 400px;
|
||||||
|
.card-item {
|
||||||
|
padding-right: 5px;
|
||||||
|
max-height: 480px;
|
||||||
|
overflow-y: auto;
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
.card-last {
|
||||||
|
padding-right: 5px;
|
||||||
|
overflow-y: auto;
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.steps-action {
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 24px;
|
||||||
|
margin-left: 20px;
|
||||||
|
}
|
||||||
|
.steps-action-save {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
.alert {
|
||||||
|
height: 40px;
|
||||||
|
padding-left: 10px;
|
||||||
|
color: rgba(0, 0, 0, 0.55);
|
||||||
|
line-height: 40px;
|
||||||
|
background-color: #f6f6f6;
|
||||||
|
}
|
||||||
|
.search {
|
||||||
|
display: flex;
|
||||||
|
margin: 15px 0;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.doc {
|
||||||
|
height: 550px;
|
||||||
|
padding: 24px;
|
||||||
|
overflow-x: hidden;
|
||||||
|
overflow-y: auto;
|
||||||
|
color: rgba(#000, 0.8);
|
||||||
|
font-size: 14px;
|
||||||
|
background-color: #fafafa;
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
margin: 16px 0;
|
||||||
|
color: rgba(#000, 0.85);
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 14px;
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.image {
|
||||||
|
margin: 16px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,736 @@
|
||||||
|
<template>
|
||||||
|
<div class="container">
|
||||||
|
<a-steps class="steps-steps" :current="stepCurrent">
|
||||||
|
<a-step v-for="item in steps" :key="item" :title="item" />
|
||||||
|
</a-steps>
|
||||||
|
<div class="steps-content">
|
||||||
|
<div class="steps-box" v-if="current === 0">
|
||||||
|
<div class="alert">
|
||||||
|
<info-circle-outlined />
|
||||||
|
通过OneNet平台的HTTP推送服务进行数据接入
|
||||||
|
</div>
|
||||||
|
<div style="margin-top: 15px">
|
||||||
|
<a-row :gutter="[24, 24]">
|
||||||
|
<a-col :span="16">
|
||||||
|
<a-form
|
||||||
|
:model="formState"
|
||||||
|
ref="formRef1"
|
||||||
|
name="basic"
|
||||||
|
autocomplete="off"
|
||||||
|
layout="vertical"
|
||||||
|
>
|
||||||
|
<a-row :gutter="[24, 24]">
|
||||||
|
<a-col :span="24">
|
||||||
|
<a-form-item
|
||||||
|
name="apiAddress"
|
||||||
|
:rules="[
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
]"
|
||||||
|
>
|
||||||
|
<div class="form-label">
|
||||||
|
接口地址
|
||||||
|
<span
|
||||||
|
class="form-label-required"
|
||||||
|
>*</span
|
||||||
|
>
|
||||||
|
<a-tooltip>
|
||||||
|
<template #title>
|
||||||
|
<p>
|
||||||
|
同步物联网平台设备数据到OneNet
|
||||||
|
</p>
|
||||||
|
</template>
|
||||||
|
<question-circle-outlined />
|
||||||
|
</a-tooltip>
|
||||||
|
</div>
|
||||||
|
<a-input
|
||||||
|
disabled
|
||||||
|
v-model:value="
|
||||||
|
formState.apiAddress
|
||||||
|
"
|
||||||
|
/>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
<a-row :gutter="[24, 24]">
|
||||||
|
<a-col :span="24">
|
||||||
|
<a-form-item
|
||||||
|
label="apiKey"
|
||||||
|
name="apiKey"
|
||||||
|
:rules="[
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请输入apiKey',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
max: 64,
|
||||||
|
message:
|
||||||
|
'最多可输入64个字符',
|
||||||
|
},
|
||||||
|
]"
|
||||||
|
>
|
||||||
|
<a-input
|
||||||
|
v-model:value="formState.apiKey"
|
||||||
|
placeholder="请输入apiKey"
|
||||||
|
/>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
<a-row :gutter="[24, 24]">
|
||||||
|
<a-col :span="12">
|
||||||
|
<a-form-item
|
||||||
|
name="validateToken"
|
||||||
|
:rules="[
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请输入通知Token',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
max: 64,
|
||||||
|
message:
|
||||||
|
'最多可输入64个字符',
|
||||||
|
},
|
||||||
|
]"
|
||||||
|
>
|
||||||
|
<div class="form-label">
|
||||||
|
通知Token
|
||||||
|
<span
|
||||||
|
class="form-label-required"
|
||||||
|
>*</span
|
||||||
|
>
|
||||||
|
<a-tooltip>
|
||||||
|
<template #title>
|
||||||
|
<p>
|
||||||
|
接收OneNet推送的Token地址
|
||||||
|
</p>
|
||||||
|
</template>
|
||||||
|
<question-circle-outlined />
|
||||||
|
</a-tooltip>
|
||||||
|
</div>
|
||||||
|
<a-input
|
||||||
|
v-model:value="
|
||||||
|
formState.validateToken
|
||||||
|
"
|
||||||
|
placeholder="请输入通知Token"
|
||||||
|
/>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="12">
|
||||||
|
<a-form-item
|
||||||
|
name="aesKey"
|
||||||
|
:rules="[
|
||||||
|
{
|
||||||
|
max: 64,
|
||||||
|
message:
|
||||||
|
'最多可输入64个字符',
|
||||||
|
},
|
||||||
|
]"
|
||||||
|
>
|
||||||
|
<div class="form-label">
|
||||||
|
aesKey
|
||||||
|
<a-tooltip>
|
||||||
|
<template #title>
|
||||||
|
<p>
|
||||||
|
OneNet
|
||||||
|
端生成的消息加密key
|
||||||
|
</p>
|
||||||
|
</template>
|
||||||
|
<question-circle-outlined />
|
||||||
|
</a-tooltip>
|
||||||
|
</div>
|
||||||
|
<a-input
|
||||||
|
v-model:value="formState.aesKey"
|
||||||
|
placeholder="请输入aesKey"
|
||||||
|
/> </a-form-item
|
||||||
|
></a-col>
|
||||||
|
</a-row>
|
||||||
|
<a-row :gutter="[24, 24]">
|
||||||
|
<a-col :span="24">
|
||||||
|
<a-form-item
|
||||||
|
label="说明"
|
||||||
|
name="description"
|
||||||
|
>
|
||||||
|
<a-textarea
|
||||||
|
placeholder="请输入说明"
|
||||||
|
:rows="4"
|
||||||
|
v-model:value="
|
||||||
|
formState.description
|
||||||
|
"
|
||||||
|
show-count
|
||||||
|
:maxlength="200"
|
||||||
|
/>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
</a-row> </a-form
|
||||||
|
></a-col>
|
||||||
|
<a-col :span="8">
|
||||||
|
<div class="doc">
|
||||||
|
<h1>操作指引：</h1>
|
||||||
|
<div>
|
||||||
|
1、OneNet端创建产品、设备，并配置HTTP推送
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
2、IOT端创建类型为OneNet的设备接入网关
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
3、IOT端创建产品，选中接入方式为OneNet类型的设备接入网关，填写Master-APIkey（OneNet端的产品Key）
|
||||||
|
</div>
|
||||||
|
<div class="image">
|
||||||
|
<a-image width="100%" :src="img5" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
4、IOT端添加设备，在设备实例页面为每一台设备设置唯一的IMEI、IMSI码（需与OneNet平台中的值一致）
|
||||||
|
</div>
|
||||||
|
<div class="image">
|
||||||
|
<a-image width="100%" :src="img6" />
|
||||||
|
</div>
|
||||||
|
<h1>HTTP推送配置说明</h1>
|
||||||
|
<div class="image">
|
||||||
|
<a-image width="100%" :src="img" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
HTTP推送配置路径：应用开发>数据推送
|
||||||
|
</div>
|
||||||
|
<a-descriptions
|
||||||
|
bordered
|
||||||
|
size="small"
|
||||||
|
:column="1"
|
||||||
|
:labelStyle="{ width: '100px' }"
|
||||||
|
>
|
||||||
|
<a-descriptions-item label="参数"
|
||||||
|
>说明</a-descriptions-item
|
||||||
|
>
|
||||||
|
<a-descriptions-item label="实例名称"
|
||||||
|
>推送实例的名称</a-descriptions-item
|
||||||
|
>
|
||||||
|
<a-descriptions-item label="推送地址">
|
||||||
|
用于接收OneNet推送设备数据的地址物联网平台地址:
|
||||||
|
<div style="word-wrap: break-word">
|
||||||
|
{{
|
||||||
|
`${origin}/api/one-net/${randomString()}/notify`
|
||||||
|
}}
|
||||||
|
</div>
|
||||||
|
</a-descriptions-item>
|
||||||
|
<a-descriptions-item label="Token">
|
||||||
|
自定义token,可用于验证请求是否来自OneNet
|
||||||
|
</a-descriptions-item>
|
||||||
|
<a-descriptions-item label="消息加密">
|
||||||
|
采用AES加密算法对推送的数据进行数据加密，AesKey为加密秘钥
|
||||||
|
</a-descriptions-item>
|
||||||
|
</a-descriptions>
|
||||||
|
|
||||||
|
<h1>设备接入网关配置说明</h1>
|
||||||
|
<a-descriptions
|
||||||
|
bordered
|
||||||
|
size="small"
|
||||||
|
:column="1"
|
||||||
|
:labelStyle="{ width: '100px' }"
|
||||||
|
>
|
||||||
|
<a-descriptions-item label="参数"
|
||||||
|
>说明</a-descriptions-item
|
||||||
|
>
|
||||||
|
<a-descriptions-item label="apiKey"
|
||||||
|
>OneNet平台中具体产品的Key</a-descriptions-item
|
||||||
|
>
|
||||||
|
<a-descriptions-item label="通知Token">
|
||||||
|
填写OneNet数据推送配置中设置的Token
|
||||||
|
</a-descriptions-item>
|
||||||
|
<a-descriptions-item label="aesKey">
|
||||||
|
若OneNet数据推送配置了消息加密，此处填写OneNet端数据推送配置中设置的aesKey
|
||||||
|
</a-descriptions-item>
|
||||||
|
</a-descriptions>
|
||||||
|
<h1>其他说明</h1>
|
||||||
|
<div>
|
||||||
|
1.在IOT端启用设备时，若OneNet平台没有与之对应的设备，则将在OneNet端自动创建新设备
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="steps-content">
|
||||||
|
<div class="steps-box" v-if="current === 1">
|
||||||
|
<div class="alert">
|
||||||
|
<info-circle-outlined />
|
||||||
|
只能选择HTTP通信方式的协议
|
||||||
|
</div>
|
||||||
|
<div class="search">
|
||||||
|
<a-input-search
|
||||||
|
allowClear
|
||||||
|
placeholder="请输入"
|
||||||
|
style="width: 300px"
|
||||||
|
@search="procotolSearch"
|
||||||
|
/>
|
||||||
|
<a-button type="primary" @click="addProcotol"
|
||||||
|
>新增</a-button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="card-item">
|
||||||
|
<a-row :gutter="[24, 24]" v-if="procotolList.length > 0">
|
||||||
|
<a-col
|
||||||
|
:span="8"
|
||||||
|
v-for="item in procotolList"
|
||||||
|
:key="item.id"
|
||||||
|
>
|
||||||
|
<access-card
|
||||||
|
@checkedChange="procotolChange"
|
||||||
|
:checked="procotolCurrent"
|
||||||
|
:data="item"
|
||||||
|
>
|
||||||
|
</access-card>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
<a-empty v-else description="暂无数据" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-if="current === 2" class="card-last">
|
||||||
|
<a-row :gutter="[24, 24]">
|
||||||
|
<a-col :span="12">
|
||||||
|
<title-component data="基本信息" />
|
||||||
|
<div>
|
||||||
|
<a-form
|
||||||
|
:model="form"
|
||||||
|
name="basic"
|
||||||
|
autocomplete="off"
|
||||||
|
layout="vertical"
|
||||||
|
ref="formRef2"
|
||||||
|
>
|
||||||
|
<a-form-item
|
||||||
|
label="名称"
|
||||||
|
name="name"
|
||||||
|
:rules="[
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请输入名称',
|
||||||
|
trigger: 'blur',
|
||||||
|
},
|
||||||
|
{ max: 64, message: '最多可输入64个字符' },
|
||||||
|
]"
|
||||||
|
>
|
||||||
|
<a-input
|
||||||
|
placeholder="请输入名称"
|
||||||
|
v-model:value="form.name"
|
||||||
|
/>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item label="说明" name="description">
|
||||||
|
<a-textarea
|
||||||
|
placeholder="请输入说明"
|
||||||
|
:rows="4"
|
||||||
|
v-model:value="form.description"
|
||||||
|
show-count
|
||||||
|
:maxlength="200"
|
||||||
|
/>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- <a-form-item>
|
||||||
|
<a-button
|
||||||
|
v-if="current !== 1"
|
||||||
|
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">
|
||||||
|
消息协议：{{ procotolCurrent }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="config-right-item">
|
||||||
|
<title-component data="设备接入指引" />
|
||||||
|
<div class="config-right-item-context">
|
||||||
|
1、创建类型为{{
|
||||||
|
props?.provider?.id === 'OneNet'
|
||||||
|
? 'OneNet'
|
||||||
|
: 'CTWing'
|
||||||
|
}}的设备接入网关
|
||||||
|
</div>
|
||||||
|
<div class="config-right-item-context">
|
||||||
|
2、创建产品，并选中接入方式为
|
||||||
|
{{
|
||||||
|
props?.provider?.id === 'OneNet'
|
||||||
|
? 'OneNet'
|
||||||
|
: 'CTWing,选中后需填写CTWing平台中的产品ID、Master-APIkey。'
|
||||||
|
}}
|
||||||
|
</div>
|
||||||
|
<div class="config-right-item-context">
|
||||||
|
3、添加设备，为每一台设备设置唯一的IMEI、SN、IMSI、PSK码（需与CTWingt平台中填写的值一致，若CTWing平台没有对应的设备，将会通过CTWing平台提供的LWM2M协议自动创建）
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</div>
|
||||||
|
<div :class="current !== 2 ? 'steps-action' : 'steps-action-save'">
|
||||||
|
<a-button
|
||||||
|
v-if="[0, 1].includes(current)"
|
||||||
|
type="primary"
|
||||||
|
@click="next"
|
||||||
|
>
|
||||||
|
下一步
|
||||||
|
</a-button>
|
||||||
|
<a-button v-if="current === 2" type="primary" @click="saveData">
|
||||||
|
保存
|
||||||
|
</a-button>
|
||||||
|
<a-button v-if="current > 0" style="margin-left: 8px" @click="prev">
|
||||||
|
上一步
|
||||||
|
</a-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup name="AccessCloudOneNet">
|
||||||
|
import { message, Form } from 'ant-design-vue';
|
||||||
|
import type { FormInstance } from 'ant-design-vue';
|
||||||
|
import { update, save, getNetworkList } from '@/api/link/accessConfig';
|
||||||
|
import { ProtocolMapping, NetworkTypeMapping } from '../../Detail/data';
|
||||||
|
import {
|
||||||
|
InfoCircleOutlined,
|
||||||
|
QuestionCircleOutlined,
|
||||||
|
} from '@ant-design/icons-vue';
|
||||||
|
import AccessCard from '../AccessCard/index.vue';
|
||||||
|
import { randomString } from '@/utils/utils';
|
||||||
|
import { getImage } from '@/utils/comm';
|
||||||
|
|
||||||
|
const origin = window.location.origin;
|
||||||
|
const img5 = getImage('/network/05.jpg');
|
||||||
|
const img6 = getImage('/network/06.jpg');
|
||||||
|
const img = getImage('/network/OneNet.jpg');
|
||||||
|
|
||||||
|
//测试数据1{
|
||||||
|
const resultList1 = [
|
||||||
|
{
|
||||||
|
id: '1612354213444087808',
|
||||||
|
name: '大华烟感协议',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '1610475299002855424',
|
||||||
|
name: '宇视摄像头协议',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '1610466717670780928',
|
||||||
|
name: '官方协议',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '1610205217785524224',
|
||||||
|
name: 'demo协议',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '1610204985806958592',
|
||||||
|
name: '水压协议',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '1605459961693745152',
|
||||||
|
name: '测试设备诊断日志显示',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '1582302200020783104',
|
||||||
|
name: 'demo',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '1581839391887794176',
|
||||||
|
name: '海康闸机协议',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '1567062365030637568',
|
||||||
|
name: '协议20220906160914',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '1561650927208628224',
|
||||||
|
name: 'local',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '1552881998413754368',
|
||||||
|
name: '官方协议V3-支持固件升级3',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '2b283b28a16d61e5fc2bdf39ceff34f8',
|
||||||
|
name: 'JetLinks官方协议',
|
||||||
|
description: 'JetLinks官方协议包',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '1551510679466844160',
|
||||||
|
name: '官方协议3.1',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '1551509716811161600',
|
||||||
|
name: '官方协议3.0',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
interface FormState {
|
||||||
|
apiAddress: string;
|
||||||
|
apiKey: string;
|
||||||
|
validateToken: string;
|
||||||
|
aesKey: string;
|
||||||
|
description: string;
|
||||||
|
}
|
||||||
|
interface Form {
|
||||||
|
name: string;
|
||||||
|
description: string;
|
||||||
|
}
|
||||||
|
const route = useRoute();
|
||||||
|
const id = route.query.id;
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
provider: {
|
||||||
|
type: Object,
|
||||||
|
default: () => {},
|
||||||
|
},
|
||||||
|
data: {
|
||||||
|
type: Object,
|
||||||
|
default: () => {},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const channel = ref(props.provider.channel);
|
||||||
|
const formRef1 = ref<FormInstance>();
|
||||||
|
const formRef2 = ref<FormInstance>();
|
||||||
|
|
||||||
|
const formState = reactive<FormState>({
|
||||||
|
apiAddress: 'https://api.heclouds.com/',
|
||||||
|
apiKey: '',
|
||||||
|
validateToken: '',
|
||||||
|
aesKey: '',
|
||||||
|
description: '',
|
||||||
|
});
|
||||||
|
const form = reactive<Form>({
|
||||||
|
name: '',
|
||||||
|
description: '',
|
||||||
|
});
|
||||||
|
|
||||||
|
const current = ref(0);
|
||||||
|
const stepCurrent = ref(0);
|
||||||
|
const steps = ref(['接入配置', '消息协议', '完成']);
|
||||||
|
const procotolList = ref([]);
|
||||||
|
const allProcotolList = ref([]);
|
||||||
|
const procotolCurrent = ref('');
|
||||||
|
|
||||||
|
const procotolChange = (id: string) => {
|
||||||
|
if (!props.data?.id) {
|
||||||
|
procotolCurrent.value = id;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const procotolSearch = (value: string) => {
|
||||||
|
if (value) {
|
||||||
|
const list = allProcotolList.value.filter((i) => {
|
||||||
|
return (
|
||||||
|
i.name &&
|
||||||
|
i.name.toLocaleLowerCase().includes(value.toLocaleLowerCase())
|
||||||
|
);
|
||||||
|
});
|
||||||
|
procotolList.value = list;
|
||||||
|
} else {
|
||||||
|
procotolList.value = allProcotolList.value;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const saveData = async () => {
|
||||||
|
const data: any = await formRef2.value?.validate();
|
||||||
|
const params = {
|
||||||
|
...data,
|
||||||
|
configuration: {
|
||||||
|
...formState,
|
||||||
|
protocol: procotolCurrent.value,
|
||||||
|
},
|
||||||
|
protocol: procotolCurrent.value,
|
||||||
|
provider: props.provider.id,
|
||||||
|
transport: 'HTTP_SERVER',
|
||||||
|
};
|
||||||
|
const resp =
|
||||||
|
props.data && props.data.id
|
||||||
|
? await update({
|
||||||
|
...props.data,
|
||||||
|
...params,
|
||||||
|
})
|
||||||
|
: await save(params);
|
||||||
|
|
||||||
|
if (resp.status === 200) {
|
||||||
|
message.success('操作成功！');
|
||||||
|
// 回到列表页面
|
||||||
|
// if (window.onTabSaveSuccess) {
|
||||||
|
// window.onTabSaveSuccess(resp);
|
||||||
|
// setTimeout(() => window.close(), 300);
|
||||||
|
// } else {
|
||||||
|
// // this.$store.dispatch('jumpPathByKey', { key: MenuKeys['Link/AccessConfig'] })
|
||||||
|
// }
|
||||||
|
history.back();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const queryProcotolList = async (id: string, params = {}) => {
|
||||||
|
// const resp = await getProtocolList(ProtocolMapping.get(id), {
|
||||||
|
// ...params,
|
||||||
|
// 'sorts[0].name': 'createTime',
|
||||||
|
// 'sorts[0].order': 'desc',
|
||||||
|
// });
|
||||||
|
// if (resp.status === 200) {
|
||||||
|
// procotolList.value = resp.result;
|
||||||
|
// allProcotolList.value = resp.result;
|
||||||
|
// }
|
||||||
|
|
||||||
|
//使用测试数据1
|
||||||
|
procotolList.value = resultList1;
|
||||||
|
allProcotolList.value = resultList1;
|
||||||
|
};
|
||||||
|
|
||||||
|
const addProcotol = () => {
|
||||||
|
// const url = this.$store.state.permission.routes['Link/Protocol']
|
||||||
|
const url = '/demo';
|
||||||
|
const tab = window.open(
|
||||||
|
`${window.location.origin + window.location.pathname}#${url}?save=true`,
|
||||||
|
);
|
||||||
|
tab.onTabSaveSuccess = (value) => {
|
||||||
|
if (value.success) {
|
||||||
|
procotolCurrent.value = value.result?.id;
|
||||||
|
queryProcotolList(props.provider?.id);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
const next = async () => {
|
||||||
|
if (current.value === 0) {
|
||||||
|
let data1: any = await formRef1.value?.validate();
|
||||||
|
queryProcotolList(props.provider.id);
|
||||||
|
current.value = current.value + 1;
|
||||||
|
} else if (current.value === 1) {
|
||||||
|
if (!procotolCurrent.value) {
|
||||||
|
message.error('请选择消息协议！');
|
||||||
|
} else {
|
||||||
|
current.value = current.value + 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const prev = () => {
|
||||||
|
current.value = current.value - 1;
|
||||||
|
};
|
||||||
|
|
||||||
|
watch(
|
||||||
|
current,
|
||||||
|
(v) => {
|
||||||
|
stepCurrent.value = v;
|
||||||
|
},
|
||||||
|
{
|
||||||
|
deep: true,
|
||||||
|
immediate: true,
|
||||||
|
},
|
||||||
|
);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.container {
|
||||||
|
margin: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.steps-content {
|
||||||
|
margin: 20px;
|
||||||
|
}
|
||||||
|
.steps-box {
|
||||||
|
min-height: 400px;
|
||||||
|
.card-item {
|
||||||
|
padding-right: 5px;
|
||||||
|
max-height: 480px;
|
||||||
|
overflow-y: auto;
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
.card-last {
|
||||||
|
padding-right: 5px;
|
||||||
|
overflow-y: auto;
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.steps-action {
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 24px;
|
||||||
|
margin-left: 20px;
|
||||||
|
}
|
||||||
|
.steps-action-save {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
.alert {
|
||||||
|
height: 40px;
|
||||||
|
padding-left: 10px;
|
||||||
|
color: rgba(0, 0, 0, 0.55);
|
||||||
|
line-height: 40px;
|
||||||
|
background-color: #f6f6f6;
|
||||||
|
}
|
||||||
|
.search {
|
||||||
|
display: flex;
|
||||||
|
margin: 15px 0;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.doc {
|
||||||
|
height: 550px;
|
||||||
|
padding: 24px;
|
||||||
|
overflow-x: hidden;
|
||||||
|
overflow-y: auto;
|
||||||
|
color: rgba(#000, 0.8);
|
||||||
|
font-size: 14px;
|
||||||
|
background-color: #fafafa;
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
margin: 16px 0;
|
||||||
|
color: rgba(#000, 0.85);
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 14px;
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.image {
|
||||||
|
margin: 16px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.form-label {
|
||||||
|
height: 30px;
|
||||||
|
padding-bottom: 8px;
|
||||||
|
.form-label-required {
|
||||||
|
color: red;
|
||||||
|
margin: 0 4px 0 -2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,37 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<Ctwing
|
||||||
|
v-if="channel === 'Ctwing'"
|
||||||
|
:provider="props.provider"
|
||||||
|
:data="props.data"
|
||||||
|
/>
|
||||||
|
<OneNet
|
||||||
|
v-if="channel === 'OneNet'"
|
||||||
|
:provider="props.provider"
|
||||||
|
:data="props.data"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup name="AccessCloud">
|
||||||
|
import Ctwing from './Ctwing.vue';
|
||||||
|
import OneNet from './OneNet.vue';
|
||||||
|
|
||||||
|
const route = useRoute();
|
||||||
|
const id = route.query.id;
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
provider: {
|
||||||
|
type: Object,
|
||||||
|
default: () => {},
|
||||||
|
},
|
||||||
|
data: {
|
||||||
|
type: Object,
|
||||||
|
default: () => {},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const channel = props.provider.channel;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped></style>
|
||||||
|
|
@ -0,0 +1,492 @@
|
||||||
|
<template>
|
||||||
|
<div v-if="type === 'edge'" class="container">
|
||||||
|
<a-steps
|
||||||
|
v-if="channel !== 'edge-child-device'"
|
||||||
|
class="steps-steps"
|
||||||
|
:current="stepCurrent"
|
||||||
|
>
|
||||||
|
<a-step v-for="item in steps" :key="item" :title="item" />
|
||||||
|
</a-steps>
|
||||||
|
<div v-if="channel !== 'edge-child-device'" class="steps-content">
|
||||||
|
<div class="steps-box" v-if="current === 0">
|
||||||
|
<div class="alert">
|
||||||
|
<question-circle-outlined />
|
||||||
|
选择与设备通信的网络组件
|
||||||
|
</div>
|
||||||
|
<div class="search">
|
||||||
|
<a-input-search
|
||||||
|
allowClear
|
||||||
|
placeholder="请输入"
|
||||||
|
style="width: 300px"
|
||||||
|
@search="networkSearch"
|
||||||
|
/>
|
||||||
|
<a-button type="primary" @click="addNetwork">新增</a-button>
|
||||||
|
</div>
|
||||||
|
<div class="card-item">
|
||||||
|
<a-row :gutter="[24, 24]" v-if="networkList.length > 0">
|
||||||
|
<a-col
|
||||||
|
:span="8"
|
||||||
|
v-for="item in networkList"
|
||||||
|
:key="item.id"
|
||||||
|
>
|
||||||
|
<access-card
|
||||||
|
@checkedChange="checkedChange"
|
||||||
|
:checked="networkCurrent"
|
||||||
|
:data="{
|
||||||
|
...item,
|
||||||
|
description: item.description
|
||||||
|
? item.description
|
||||||
|
: descriptionList[provider.id],
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<template #other>
|
||||||
|
<div class="other">
|
||||||
|
<a-tooltip placement="topLeft">
|
||||||
|
<div
|
||||||
|
v-if="
|
||||||
|
(item.addresses || [])
|
||||||
|
.length > 1
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
v-for="i in item.addresses ||
|
||||||
|
[]"
|
||||||
|
:key="i.address"
|
||||||
|
class="item"
|
||||||
|
>
|
||||||
|
<a-badge
|
||||||
|
:color="
|
||||||
|
i.health === -1
|
||||||
|
? 'red'
|
||||||
|
: 'green'
|
||||||
|
"
|
||||||
|
/>{{ i.address }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
v-for="i in (
|
||||||
|
item.addresses || []
|
||||||
|
).slice(0, 1)"
|
||||||
|
:key="i.address"
|
||||||
|
class="item"
|
||||||
|
>
|
||||||
|
<a-badge
|
||||||
|
:color="
|
||||||
|
i.health === -1
|
||||||
|
? 'red'
|
||||||
|
: 'green'
|
||||||
|
"
|
||||||
|
:text="i.address"
|
||||||
|
/>
|
||||||
|
<span
|
||||||
|
v-if="
|
||||||
|
(item.addresses || [])
|
||||||
|
.length > 1
|
||||||
|
"
|
||||||
|
>...</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</a-tooltip>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</access-card>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
<a-empty v-else description="暂无数据" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
v-if="channel === 'edge-child-device' || current === 1"
|
||||||
|
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"
|
||||||
|
ref="formRef"
|
||||||
|
>
|
||||||
|
<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
|
||||||
|
v-if="current !== 1"
|
||||||
|
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>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
v-if="channel !== 'edge-child-device'"
|
||||||
|
:class="current !== 1 ? 'steps-action' : 'steps-action-save'"
|
||||||
|
>
|
||||||
|
<a-button v-if="[0].includes(current)" @click="next">
|
||||||
|
下一步
|
||||||
|
</a-button>
|
||||||
|
<a-button v-if="current === 1" type="primary" @click="saveData">
|
||||||
|
保存
|
||||||
|
</a-button>
|
||||||
|
<a-button v-if="current > 0" style="margin-left: 8px" @click="prev">
|
||||||
|
上一步
|
||||||
|
</a-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup name="AccessEdge">
|
||||||
|
import { message, Form } from 'ant-design-vue';
|
||||||
|
import type { FormInstance } from 'ant-design-vue';
|
||||||
|
import { update, save, getNetworkList } from '@/api/link/accessConfig';
|
||||||
|
import {
|
||||||
|
descriptionList,
|
||||||
|
ProtocolMapping,
|
||||||
|
NetworkTypeMapping,
|
||||||
|
} from '../../Detail/data';
|
||||||
|
import { QuestionCircleOutlined } from '@ant-design/icons-vue';
|
||||||
|
import AccessCard from '../AccessCard/index.vue';
|
||||||
|
|
||||||
|
//测试数据1
|
||||||
|
const networkListTest = {
|
||||||
|
message: 'success',
|
||||||
|
result: [
|
||||||
|
{
|
||||||
|
id: '1585192878304051200',
|
||||||
|
name: 'MQTT网络组件',
|
||||||
|
addresses: [
|
||||||
|
{
|
||||||
|
address: 'mqtt://120.77.179.54:8101',
|
||||||
|
health: 1,
|
||||||
|
ok: true,
|
||||||
|
bad: false,
|
||||||
|
disabled: false,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '1583268266806009856',
|
||||||
|
name: '我的第一个MQTT服务组件',
|
||||||
|
description: '',
|
||||||
|
addresses: [
|
||||||
|
{
|
||||||
|
address: 'mqtt://120.77.179.54:8100',
|
||||||
|
health: 1,
|
||||||
|
ok: true,
|
||||||
|
bad: false,
|
||||||
|
disabled: false,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '1570335308902912000',
|
||||||
|
name: '0915MQTT网络组件_勿动',
|
||||||
|
description: '测试，勿动！',
|
||||||
|
addresses: [
|
||||||
|
{
|
||||||
|
address: 'mqtt://120.77.179.54:8083',
|
||||||
|
health: 1,
|
||||||
|
ok: true,
|
||||||
|
bad: false,
|
||||||
|
disabled: false,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '1567062350140858368',
|
||||||
|
name: '网络组件20220906160907',
|
||||||
|
addresses: [
|
||||||
|
{
|
||||||
|
address: 'mqtt://120.77.179.54:8083',
|
||||||
|
health: 1,
|
||||||
|
ok: true,
|
||||||
|
bad: false,
|
||||||
|
disabled: false,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '1556563257890742272',
|
||||||
|
name: 'MQTT网络组件',
|
||||||
|
addresses: [
|
||||||
|
{
|
||||||
|
address: 'mqtt://0.0.0.0:8104',
|
||||||
|
health: 1,
|
||||||
|
ok: true,
|
||||||
|
bad: false,
|
||||||
|
disabled: false,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '1534774770408108032',
|
||||||
|
name: 'MQTT',
|
||||||
|
addresses: [
|
||||||
|
{
|
||||||
|
address: 'mqtt://120.77.179.54:8088',
|
||||||
|
health: 1,
|
||||||
|
ok: true,
|
||||||
|
bad: false,
|
||||||
|
disabled: false,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
status: 200,
|
||||||
|
timestamp: 1674960624150,
|
||||||
|
};
|
||||||
|
|
||||||
|
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 channel = ref(props.provider.channel);
|
||||||
|
|
||||||
|
const formState = reactive<FormState>({
|
||||||
|
name: '',
|
||||||
|
description: '',
|
||||||
|
});
|
||||||
|
|
||||||
|
const formRef = ref<FormInstance>();
|
||||||
|
|
||||||
|
const current = ref(0);
|
||||||
|
const stepCurrent = ref(0);
|
||||||
|
const steps = ref(['网络组件', '完成']);
|
||||||
|
const networkCurrent = ref('');
|
||||||
|
const networkList = ref([]);
|
||||||
|
|
||||||
|
const onFinish = async (values: any) => {
|
||||||
|
const providerId = props.provider.id;
|
||||||
|
const params = {
|
||||||
|
...values,
|
||||||
|
protocol: 'official-edge-protocol',
|
||||||
|
provider: providerId,
|
||||||
|
transport: ProtocolMapping.get(providerId),
|
||||||
|
};
|
||||||
|
if (networkCurrent.value) params.channelId = networkCurrent.value;
|
||||||
|
console.log(1112, networkCurrent.value, params);
|
||||||
|
|
||||||
|
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();
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const checkedChange = (id: string) => {
|
||||||
|
networkCurrent.value = id;
|
||||||
|
};
|
||||||
|
|
||||||
|
const queryNetworkList = async (id: string, include: string, data = {}) => {
|
||||||
|
// const resp = await getNetworkList(
|
||||||
|
// NetworkTypeMapping.get(id),
|
||||||
|
// include,
|
||||||
|
// data,
|
||||||
|
// );
|
||||||
|
// if (resp.status === 200) {
|
||||||
|
// networkList.value = resp.result;
|
||||||
|
// }
|
||||||
|
|
||||||
|
//使用测试数据1
|
||||||
|
networkList.value = networkListTest.result;
|
||||||
|
};
|
||||||
|
|
||||||
|
const networkSearch = (value: string) => {
|
||||||
|
queryNetworkList(props.provider.id, networkCurrent.value || '', {
|
||||||
|
terms: [
|
||||||
|
{
|
||||||
|
column: 'name$LIKE',
|
||||||
|
value: `%${value}%`,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const saveData = async () => {
|
||||||
|
const data: any = await formRef.value?.validate();
|
||||||
|
onFinish(data);
|
||||||
|
};
|
||||||
|
|
||||||
|
const addNetwork = () => {
|
||||||
|
// const url = this.$store.state.permission.routes['Link/Type/Detail']
|
||||||
|
const url = '/demo';
|
||||||
|
const tab = window.open(
|
||||||
|
`${window.location.origin + window.location.pathname}#${url}?type=${
|
||||||
|
NetworkTypeMapping.get(props.provider?.id) || ''
|
||||||
|
}`,
|
||||||
|
);
|
||||||
|
tab.onTabSaveSuccess = (value) => {
|
||||||
|
if (value.success) {
|
||||||
|
networkCurrent.value = value.result.id;
|
||||||
|
queryNetworkList(props.provider?.id, networkCurrent.value || '');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
const next = async () => {
|
||||||
|
if (!networkCurrent.value) {
|
||||||
|
message.error('请选择网络组件！');
|
||||||
|
} else {
|
||||||
|
current.value = current.value + 1;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const prev = () => {
|
||||||
|
current.value = current.value - 1;
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
if (props.provider.id === 'official-edge-gateway') {
|
||||||
|
queryNetworkList(props.provider.id, '');
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
watch(
|
||||||
|
current,
|
||||||
|
(v) => {
|
||||||
|
stepCurrent.value = v;
|
||||||
|
},
|
||||||
|
{
|
||||||
|
deep: true,
|
||||||
|
immediate: true,
|
||||||
|
},
|
||||||
|
);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.container {
|
||||||
|
margin: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.steps-content {
|
||||||
|
margin: 20px;
|
||||||
|
}
|
||||||
|
.steps-box {
|
||||||
|
min-height: 400px;
|
||||||
|
.card-item {
|
||||||
|
padding-right: 5px;
|
||||||
|
max-height: 480px;
|
||||||
|
overflow-y: auto;
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
.card-last {
|
||||||
|
padding-right: 5px;
|
||||||
|
overflow-y: auto;
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.steps-action {
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 24px;
|
||||||
|
margin-left: 20px;
|
||||||
|
}
|
||||||
|
.steps-action-save {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
.alert {
|
||||||
|
height: 40px;
|
||||||
|
padding-left: 10px;
|
||||||
|
color: rgba(0, 0, 0, 0.55);
|
||||||
|
line-height: 40px;
|
||||||
|
background-color: #f6f6f6;
|
||||||
|
}
|
||||||
|
.search {
|
||||||
|
display: flex;
|
||||||
|
margin: 15px 0;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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>
|
||||||
|
|
@ -6,7 +6,7 @@
|
||||||
<div class="steps-content">
|
<div class="steps-content">
|
||||||
<div class="steps-box" v-if="current === 0">
|
<div class="steps-box" v-if="current === 0">
|
||||||
<div class="alert">
|
<div class="alert">
|
||||||
<question-circle-outlined />
|
<info-circle-outlined />
|
||||||
配置设备信令参数
|
配置设备信令参数
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
|
|
@ -511,7 +511,12 @@
|
||||||
import { message, Form } from 'ant-design-vue';
|
import { message, Form } from 'ant-design-vue';
|
||||||
import type { FormInstance } from 'ant-design-vue';
|
import type { FormInstance } from 'ant-design-vue';
|
||||||
import { getResourcesCurrent, getClusters } from '@/api/link/accessConfig';
|
import { getResourcesCurrent, getClusters } from '@/api/link/accessConfig';
|
||||||
import { DeleteOutlined, PlusOutlined } from '@ant-design/icons-vue';
|
import {
|
||||||
|
DeleteOutlined,
|
||||||
|
PlusOutlined,
|
||||||
|
QuestionCircleOutlined,
|
||||||
|
InfoCircleOutlined,
|
||||||
|
} from '@ant-design/icons-vue';
|
||||||
import { update, save } from '@/api/link/accessConfig';
|
import { update, save } from '@/api/link/accessConfig';
|
||||||
|
|
||||||
interface Form2 {
|
interface Form2 {
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,7 @@
|
||||||
<div class="steps-content">
|
<div class="steps-content">
|
||||||
<div class="steps-box" v-if="current === 0">
|
<div class="steps-box" v-if="current === 0">
|
||||||
<div class="alert">
|
<div class="alert">
|
||||||
<question-circle-outlined />
|
<info-circle-outlined />
|
||||||
选择与设备通信的网络组件
|
选择与设备通信的网络组件
|
||||||
</div>
|
</div>
|
||||||
<div class="search">
|
<div class="search">
|
||||||
|
|
@ -93,7 +93,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="steps-box" v-else-if="current === 1">
|
<div class="steps-box" v-else-if="current === 1">
|
||||||
<div class="alert">
|
<div class="alert">
|
||||||
<question-circle-outlined />
|
<info-circle-outlined />
|
||||||
使用选择的消息协议，对网络组件通信数据进行编解码、认证等操作
|
使用选择的消息协议，对网络组件通信数据进行编解码、认证等操作
|
||||||
</div>
|
</div>
|
||||||
<div class="search">
|
<div class="search">
|
||||||
|
|
@ -326,7 +326,7 @@ import AccessCard from './AccessCard/index.vue';
|
||||||
import { message, Form } from 'ant-design-vue';
|
import { message, Form } from 'ant-design-vue';
|
||||||
import type { FormInstance, TableColumnType } from 'ant-design-vue';
|
import type { FormInstance, TableColumnType } from 'ant-design-vue';
|
||||||
import Markdown from 'vue3-markdown-it';
|
import Markdown from 'vue3-markdown-it';
|
||||||
import { QuestionCircleOutlined } from '@ant-design/icons-vue';
|
import { InfoCircleOutlined } from '@ant-design/icons-vue';
|
||||||
//测试数据1
|
//测试数据1
|
||||||
const resultList1 = [
|
const resultList1 = [
|
||||||
{
|
{
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,201 @@
|
||||||
|
<template>
|
||||||
|
<a-modal
|
||||||
|
v-model:visible="_vis"
|
||||||
|
title="调试"
|
||||||
|
cancelText="取消"
|
||||||
|
okText="确定"
|
||||||
|
@ok="handleOk"
|
||||||
|
@cancel="handleCancel"
|
||||||
|
:confirmLoading="btnLoading"
|
||||||
|
>
|
||||||
|
<a-form layout="vertical">
|
||||||
|
<a-form-item label="通知模版" v-bind="validateInfos.templateId">
|
||||||
|
<a-select
|
||||||
|
v-model:value="formData.templateId"
|
||||||
|
placeholder="请选择通知模版"
|
||||||
|
@change="getTemplateDetail"
|
||||||
|
>
|
||||||
|
<a-select-option
|
||||||
|
v-for="(item, index) in templateList"
|
||||||
|
:key="index"
|
||||||
|
:value="item.id"
|
||||||
|
>
|
||||||
|
{{ item.name }}
|
||||||
|
</a-select-option>
|
||||||
|
</a-select>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item
|
||||||
|
label="变量"
|
||||||
|
v-bind="validateInfos.variableDefinitions"
|
||||||
|
v-if="templateDetailTable && templateDetailTable.length"
|
||||||
|
>
|
||||||
|
<a-table
|
||||||
|
ref="myTable"
|
||||||
|
class="debug-table"
|
||||||
|
:columns="columns"
|
||||||
|
:data-source="templateDetailTable"
|
||||||
|
:pagination="false"
|
||||||
|
:rowKey="
|
||||||
|
(record, index) => {
|
||||||
|
return record.id;
|
||||||
|
}
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<template #bodyCell="{ column, text, record }">
|
||||||
|
<template
|
||||||
|
v-if="['id', 'name'].includes(column.dataIndex)"
|
||||||
|
>
|
||||||
|
<span>{{ record[column.dataIndex] }}</span>
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
<ValueItem
|
||||||
|
v-model:modelValue="record.value"
|
||||||
|
:itemType="record.type"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
</a-table>
|
||||||
|
</a-form-item>
|
||||||
|
</a-form>
|
||||||
|
</a-modal>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { Form } from 'ant-design-vue';
|
||||||
|
import { PropType } from 'vue';
|
||||||
|
import ConfigApi from '@/api/notice/config';
|
||||||
|
import {
|
||||||
|
TemplateFormData,
|
||||||
|
IVariableDefinitions,
|
||||||
|
} from '@/views/notice/Template/types';
|
||||||
|
import { message } from 'ant-design-vue';
|
||||||
|
|
||||||
|
const useForm = Form.useForm;
|
||||||
|
|
||||||
|
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),
|
||||||
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取通知模板
|
||||||
|
*/
|
||||||
|
const templateList = ref<TemplateFormData[]>([]);
|
||||||
|
const getTemplateList = async () => {
|
||||||
|
const params = {
|
||||||
|
terms: [
|
||||||
|
{ column: 'type', value: props.data.type },
|
||||||
|
{ column: 'provider', value: props.data.provider },
|
||||||
|
],
|
||||||
|
};
|
||||||
|
const { result } = await ConfigApi.getTemplate(params, props.data.id);
|
||||||
|
templateList.value = result;
|
||||||
|
};
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => _vis.value,
|
||||||
|
(val) => {
|
||||||
|
if (val) getTemplateList();
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取模板详情
|
||||||
|
*/
|
||||||
|
const templateDetailTable = ref<IVariableDefinitions[]>();
|
||||||
|
const getTemplateDetail = async () => {
|
||||||
|
const { result } = await ConfigApi.getTemplateDetail(
|
||||||
|
formData.value.templateId,
|
||||||
|
);
|
||||||
|
templateDetailTable.value = result.variableDefinitions.map((m: any) => ({
|
||||||
|
...m,
|
||||||
|
value: undefined,
|
||||||
|
}));
|
||||||
|
};
|
||||||
|
|
||||||
|
const columns = [
|
||||||
|
{
|
||||||
|
title: '变量',
|
||||||
|
dataIndex: 'id',
|
||||||
|
scopedSlots: { customRender: 'id' },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '名称',
|
||||||
|
dataIndex: 'name',
|
||||||
|
scopedSlots: { customRender: 'name' },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '值',
|
||||||
|
dataIndex: 'type',
|
||||||
|
width: 160,
|
||||||
|
scopedSlots: { customRender: 'type' },
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
// 表单数据
|
||||||
|
const formData = ref({
|
||||||
|
templateId: '',
|
||||||
|
variableDefinitions: '',
|
||||||
|
});
|
||||||
|
|
||||||
|
// 验证规则
|
||||||
|
const formRules = ref({
|
||||||
|
templateId: [{ required: true, message: '请选择通知模板' }],
|
||||||
|
variableDefinitions: [{ required: false, message: '该字段是必填字段' }],
|
||||||
|
});
|
||||||
|
|
||||||
|
const { resetFields, validate, validateInfos, clearValidate } = useForm(
|
||||||
|
formData.value,
|
||||||
|
formRules.value,
|
||||||
|
);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 提交
|
||||||
|
*/
|
||||||
|
const btnLoading = ref(false);
|
||||||
|
const handleOk = () => {
|
||||||
|
validate()
|
||||||
|
.then(async () => {
|
||||||
|
const params = {};
|
||||||
|
templateDetailTable.value?.forEach((item) => {
|
||||||
|
params[item.id] = item.value;
|
||||||
|
});
|
||||||
|
// console.log('params: ', params);
|
||||||
|
btnLoading.value = true;
|
||||||
|
ConfigApi.debug(params, props.data.id, formData.value.templateId)
|
||||||
|
.then((res) => {
|
||||||
|
if (res.success) {
|
||||||
|
message.success('操作成功');
|
||||||
|
handleCancel();
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
btnLoading.value = false;
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
console.log('err: ', err);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleCancel = () => {
|
||||||
|
_vis.value = false;
|
||||||
|
templateDetailTable.value = [];
|
||||||
|
resetFields();
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped></style>
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
<template>
|
||||||
|
<div class="page-container">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
<template>
|
||||||
|
<div class="page-container">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
</style>
|
||||||
|
|
@ -1,22 +1,371 @@
|
||||||
<!-- 通知配置 -->
|
|
||||||
<template>
|
<template>
|
||||||
<div class="page-container">通知配置</div>
|
<div class="page-container">
|
||||||
|
<a-card style="margin-bottom: 20px">
|
||||||
|
<Search
|
||||||
|
:columns="columns"
|
||||||
|
target="notice-config"
|
||||||
|
@search="handleSearch"
|
||||||
|
/>
|
||||||
|
</a-card>
|
||||||
|
<a-card>
|
||||||
|
<JTable
|
||||||
|
ref="instanceRef"
|
||||||
|
:columns="columns"
|
||||||
|
:request="configApi.list"
|
||||||
|
:defaultParams="{
|
||||||
|
sorts: [{ name: 'createTime', order: 'desc' }],
|
||||||
|
}"
|
||||||
|
:params="params"
|
||||||
|
>
|
||||||
|
<template #headerTitle>
|
||||||
|
<a-space>
|
||||||
|
<a-button type="primary" @click="handleAdd">
|
||||||
|
新增
|
||||||
|
</a-button>
|
||||||
|
<a-upload
|
||||||
|
name="file"
|
||||||
|
accept="json"
|
||||||
|
:showUploadList="false"
|
||||||
|
:before-upload="beforeUpload"
|
||||||
|
>
|
||||||
|
<a-button>导入</a-button>
|
||||||
|
</a-upload>
|
||||||
|
<a-button @click="handleExport">导出</a-button>
|
||||||
|
</a-space>
|
||||||
|
</template>
|
||||||
|
<template #card="slotProps">
|
||||||
|
<CardBox
|
||||||
|
:showStatus="false"
|
||||||
|
:value="slotProps"
|
||||||
|
:actions="getActions(slotProps, 'card')"
|
||||||
|
v-bind="slotProps"
|
||||||
|
>
|
||||||
|
<template #img>
|
||||||
|
<slot name="img">
|
||||||
|
<img
|
||||||
|
:src="
|
||||||
|
getLogo(
|
||||||
|
slotProps.type,
|
||||||
|
slotProps.provider,
|
||||||
|
)
|
||||||
|
"
|
||||||
|
/>
|
||||||
|
</slot>
|
||||||
|
</template>
|
||||||
|
<template #content>
|
||||||
|
<h3 class="card-item-content-title">
|
||||||
|
{{ slotProps.name }}
|
||||||
|
</h3>
|
||||||
|
<a-row>
|
||||||
|
<a-col :span="12">
|
||||||
|
<div class="card-item-content-text">
|
||||||
|
通知方式
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
{{ getMethodTxt(slotProps.type) }}
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="12">
|
||||||
|
<div class="card-item-content-text">
|
||||||
|
说明
|
||||||
|
</div>
|
||||||
|
<div>{{ slotProps.description }}</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</template>
|
||||||
|
<template #actions="item">
|
||||||
|
<a-tooltip
|
||||||
|
v-bind="item.tooltip"
|
||||||
|
:title="item.disabled && item.tooltip.title"
|
||||||
|
>
|
||||||
|
<a-popconfirm
|
||||||
|
v-if="item.popConfirm"
|
||||||
|
v-bind="item.popConfirm"
|
||||||
|
:disabled="item.disabled"
|
||||||
|
>
|
||||||
|
<a-button :disabled="item.disabled">
|
||||||
|
<AIcon
|
||||||
|
type="DeleteOutlined"
|
||||||
|
v-if="item.key === 'delete'"
|
||||||
|
/>
|
||||||
|
<template v-else>
|
||||||
|
<AIcon :type="item.icon" />
|
||||||
|
<span>{{ item.text }}</span>
|
||||||
|
</template>
|
||||||
|
</a-button>
|
||||||
|
</a-popconfirm>
|
||||||
|
<template v-else>
|
||||||
|
<a-button
|
||||||
|
:disabled="item.disabled"
|
||||||
|
@click="item.onClick"
|
||||||
|
>
|
||||||
|
<AIcon
|
||||||
|
type="DeleteOutlined"
|
||||||
|
v-if="item.key === 'delete'"
|
||||||
|
/>
|
||||||
|
<template v-else>
|
||||||
|
<AIcon :type="item.icon" />
|
||||||
|
<span>{{ item.text }}</span>
|
||||||
|
</template>
|
||||||
|
</a-button>
|
||||||
|
</template>
|
||||||
|
</a-tooltip>
|
||||||
|
</template>
|
||||||
|
</CardBox>
|
||||||
|
</template>
|
||||||
|
<template #action="slotProps">
|
||||||
|
<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>
|
||||||
|
</a-card>
|
||||||
|
|
||||||
|
<Debug v-model:visible="debugVis" :data="currentConfig" />
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import configApi from '@/api/notice/config';
|
import configApi from '@/api/notice/config';
|
||||||
|
import type { ActionsType } from '@/components/Table/index.vue';
|
||||||
|
import { getImage, LocalStore } from '@/utils/comm';
|
||||||
|
import { message } from 'ant-design-vue';
|
||||||
|
import { BASE_API_PATH, TOKEN_KEY } from '@/utils/variable';
|
||||||
|
|
||||||
const getList = async () => {
|
import { NOTICE_METHOD, MSG_TYPE } from '@/views/notice/const';
|
||||||
const res = await configApi.list({
|
import SyncUser from './SyncUser/index.vue'
|
||||||
current: 1,
|
import Debug from './Debug/index.vue'
|
||||||
pageIndex: 0,
|
import Log from './Log/index.vue'
|
||||||
pageSize: 12,
|
|
||||||
sorts: [{ name: 'createTime', order: 'desc' }],
|
let providerList: any = [];
|
||||||
terms: [],
|
Object.keys(MSG_TYPE).forEach((key) => {
|
||||||
});
|
providerList = [...providerList, ...MSG_TYPE[key]];
|
||||||
console.log('res: ', res);
|
});
|
||||||
|
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
const instanceRef = ref<Record<string, any>>({});
|
||||||
|
const params = ref<Record<string, any>>({});
|
||||||
|
|
||||||
|
const columns = [
|
||||||
|
{
|
||||||
|
title: '配置名称',
|
||||||
|
dataIndex: 'name',
|
||||||
|
key: 'name',
|
||||||
|
search: {
|
||||||
|
type: 'string',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '通知方式',
|
||||||
|
dataIndex: 'type',
|
||||||
|
key: 'type',
|
||||||
|
scopedSlots: true,
|
||||||
|
search: {
|
||||||
|
type: 'select',
|
||||||
|
options: NOTICE_METHOD,
|
||||||
|
handleValue: (v: any) => {
|
||||||
|
return '123';
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '类型',
|
||||||
|
dataIndex: 'provider',
|
||||||
|
key: 'provider',
|
||||||
|
scopedSlots: true,
|
||||||
|
search: {
|
||||||
|
type: 'select',
|
||||||
|
options: providerList,
|
||||||
|
handleValue: (v: any) => {
|
||||||
|
return '123';
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '说明',
|
||||||
|
dataIndex: 'description',
|
||||||
|
key: 'description',
|
||||||
|
search: {
|
||||||
|
type: 'string',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '操作',
|
||||||
|
key: 'action',
|
||||||
|
fixed: 'right',
|
||||||
|
width: 250,
|
||||||
|
scopedSlots: true,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 搜索
|
||||||
|
* @param params
|
||||||
|
*/
|
||||||
|
const handleSearch = (e: any) => {
|
||||||
|
console.log('handleSearch:', e);
|
||||||
|
params.value = e;
|
||||||
};
|
};
|
||||||
getList();
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="less" scoped></style>
|
/**
|
||||||
|
* 根据通知方式展示对应logo
|
||||||
|
*/
|
||||||
|
const getLogo = (type: string, provider: string) => {
|
||||||
|
return MSG_TYPE[type].find((f: any) => f.value === provider)?.logo;
|
||||||
|
};
|
||||||
|
/**
|
||||||
|
* 通知方式字段展示对应文字
|
||||||
|
*/
|
||||||
|
const getMethodTxt = (type: string) => {
|
||||||
|
return NOTICE_METHOD.find((f) => f.value === type)?.label;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 新增
|
||||||
|
*/
|
||||||
|
const handleAdd = () => {
|
||||||
|
router.push(`/notice/Config/detail/:id`);
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 导入
|
||||||
|
*/
|
||||||
|
const beforeUpload = () => {};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 导出
|
||||||
|
*/
|
||||||
|
const handleExport = () => {};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 查看
|
||||||
|
*/
|
||||||
|
const handleView = (id: string) => {
|
||||||
|
message.warn(id + '暂未开发');
|
||||||
|
};
|
||||||
|
|
||||||
|
const syncVis = ref(false);
|
||||||
|
const debugVis = ref(false);
|
||||||
|
const logVis = ref(false);
|
||||||
|
const currentConfig = ref<Partial<Record<string, any>>>();
|
||||||
|
const getActions = (
|
||||||
|
data: Partial<Record<string, any>>,
|
||||||
|
type: 'card' | 'table',
|
||||||
|
): ActionsType[] => {
|
||||||
|
if (!data) return [];
|
||||||
|
const actions = [
|
||||||
|
{
|
||||||
|
key: 'edit',
|
||||||
|
text: '编辑',
|
||||||
|
tooltip: {
|
||||||
|
title: '编辑',
|
||||||
|
},
|
||||||
|
icon: 'EditOutlined',
|
||||||
|
onClick: () => {
|
||||||
|
// visible.value = true;
|
||||||
|
// current.value = data;
|
||||||
|
router.push(`/notice/Config/detail/${data.id}`);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'debug',
|
||||||
|
text: '调试',
|
||||||
|
tooltip: {
|
||||||
|
title: '调试',
|
||||||
|
},
|
||||||
|
icon: 'BugOutlined',
|
||||||
|
onClick: () => {
|
||||||
|
debugVis.value = true;
|
||||||
|
currentConfig.value = data;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'debug',
|
||||||
|
text: '通知记录',
|
||||||
|
tooltip: {
|
||||||
|
title: '通知记录',
|
||||||
|
},
|
||||||
|
icon: 'BarsOutlined',
|
||||||
|
onClick: () => {
|
||||||
|
logVis.value = true;
|
||||||
|
currentConfig.value = data;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'debug',
|
||||||
|
text: '导出',
|
||||||
|
tooltip: {
|
||||||
|
title: '导出',
|
||||||
|
},
|
||||||
|
icon: 'ArrowDownOutlined',
|
||||||
|
onClick: () => {
|
||||||
|
// debugVis.value = true;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'delete',
|
||||||
|
text: '删除',
|
||||||
|
// disabled: data.state.value !== 'notActive',
|
||||||
|
// tooltip: {
|
||||||
|
// title:
|
||||||
|
// data.state.value !== 'notActive'
|
||||||
|
// ? '已启用的设备不能删除'
|
||||||
|
// : '删除',
|
||||||
|
// },
|
||||||
|
popConfirm: {
|
||||||
|
title: '确认删除?',
|
||||||
|
onConfirm: async () => {
|
||||||
|
const resp = await configApi.del(data.id);
|
||||||
|
if (resp.status === 200) {
|
||||||
|
message.success('操作成功！');
|
||||||
|
// instanceRef.value?.reload();
|
||||||
|
} else {
|
||||||
|
message.error('操作失败！');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
icon: 'DeleteOutlined',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
if (type === 'card')
|
||||||
|
return actions.filter((i: ActionsType) => i.key !== 'view');
|
||||||
|
return actions;
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.page-container {
|
||||||
|
background: #f0f2f5;
|
||||||
|
padding: 24px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,46 @@
|
||||||
|
<template>
|
||||||
|
<a-select
|
||||||
|
:options="options"
|
||||||
|
@change="change"
|
||||||
|
placeholder="请选择收信部门"
|
||||||
|
style="width: 100%"
|
||||||
|
:allowClear="true"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import templateApi from '@/api/notice/template';
|
||||||
|
|
||||||
|
type Emits = {
|
||||||
|
(e: 'update:toParty', data: string): void;
|
||||||
|
};
|
||||||
|
const emit = defineEmits<Emits>();
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
type: { type: String, default: '' },
|
||||||
|
configId: { type: String, default: '' },
|
||||||
|
});
|
||||||
|
|
||||||
|
const options = ref([]);
|
||||||
|
const queryData = async () => {
|
||||||
|
const { result } = await templateApi.getDept(props.type, props.configId);
|
||||||
|
options.value = result.map((item: any) => ({
|
||||||
|
label: item.name,
|
||||||
|
value: item.id,
|
||||||
|
}));
|
||||||
|
};
|
||||||
|
queryData();
|
||||||
|
|
||||||
|
const change = (e: any) => {
|
||||||
|
emit('update:toParty', e);
|
||||||
|
};
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => props.configId,
|
||||||
|
() => {
|
||||||
|
queryData();
|
||||||
|
},
|
||||||
|
);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped></style>
|
||||||
|
|
@ -0,0 +1,46 @@
|
||||||
|
<template>
|
||||||
|
<a-select
|
||||||
|
:options="options"
|
||||||
|
@change="change"
|
||||||
|
placeholder="请选择标签推送，多个标签用,号分隔"
|
||||||
|
style="width: 100%"
|
||||||
|
:allowClear="true"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import templateApi from '@/api/notice/template';
|
||||||
|
|
||||||
|
type Emits = {
|
||||||
|
(e: 'update:toTag', data: string): void;
|
||||||
|
};
|
||||||
|
const emit = defineEmits<Emits>();
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
type: { type: String, default: '' },
|
||||||
|
configId: { type: String, default: '' },
|
||||||
|
});
|
||||||
|
|
||||||
|
const options = ref([]);
|
||||||
|
const queryData = async () => {
|
||||||
|
const { result } = await templateApi.getTags(props.configId);
|
||||||
|
options.value = result.map((item: any) => ({
|
||||||
|
label: item.name,
|
||||||
|
value: item.id,
|
||||||
|
}));
|
||||||
|
};
|
||||||
|
queryData();
|
||||||
|
|
||||||
|
const change = (e: any) => {
|
||||||
|
emit('update:toTag', e);
|
||||||
|
};
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => props.configId,
|
||||||
|
() => {
|
||||||
|
queryData();
|
||||||
|
},
|
||||||
|
);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped></style>
|
||||||
|
|
@ -0,0 +1,46 @@
|
||||||
|
<template>
|
||||||
|
<a-select
|
||||||
|
:options="options"
|
||||||
|
@change="change"
|
||||||
|
placeholder="请选择收信人"
|
||||||
|
style="width: 100%"
|
||||||
|
:allowClear="true"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import templateApi from '@/api/notice/template';
|
||||||
|
|
||||||
|
type Emits = {
|
||||||
|
(e: 'update:toUser', data: string): void;
|
||||||
|
};
|
||||||
|
const emit = defineEmits<Emits>();
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
type: { type: String, default: '' },
|
||||||
|
configId: { type: String, default: '' },
|
||||||
|
});
|
||||||
|
|
||||||
|
const options = ref([]);
|
||||||
|
const queryData = async () => {
|
||||||
|
const { result } = await templateApi.getUser(props.type, props.configId);
|
||||||
|
options.value = result.map((item: any) => ({
|
||||||
|
label: item.name,
|
||||||
|
value: item.id,
|
||||||
|
}));
|
||||||
|
};
|
||||||
|
queryData();
|
||||||
|
|
||||||
|
const change = (e: any) => {
|
||||||
|
emit('update:toUser', e);
|
||||||
|
};
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => props.configId,
|
||||||
|
() => {
|
||||||
|
queryData();
|
||||||
|
},
|
||||||
|
);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped></style>
|
||||||
|
|
@ -50,6 +50,7 @@
|
||||||
<a-select
|
<a-select
|
||||||
v-model:value="formData.configId"
|
v-model:value="formData.configId"
|
||||||
placeholder="请选择绑定配置"
|
placeholder="请选择绑定配置"
|
||||||
|
@change="handleConfigChange"
|
||||||
>
|
>
|
||||||
<a-select-option
|
<a-select-option
|
||||||
v-for="(item, index) in configList"
|
v-for="(item, index) in configList"
|
||||||
|
|
@ -179,58 +180,33 @@
|
||||||
<a-row :gutter="10">
|
<a-row :gutter="10">
|
||||||
<a-col :span="12">
|
<a-col :span="12">
|
||||||
<a-form-item label="收信人">
|
<a-form-item label="收信人">
|
||||||
<a-select
|
<ToUser
|
||||||
v-model:value="
|
v-model:to-user="
|
||||||
formData.template.toUser
|
formData.template.toUser
|
||||||
"
|
"
|
||||||
placeholder="请选择收信人"
|
:type="formData.type"
|
||||||
>
|
:config-id="formData.configId"
|
||||||
<a-select-option
|
/>
|
||||||
v-for="(
|
|
||||||
item, index
|
|
||||||
) in ROBOT_MSG_TYPE"
|
|
||||||
:key="index"
|
|
||||||
:value="item.value"
|
|
||||||
>
|
|
||||||
{{ item.label }}
|
|
||||||
</a-select-option>
|
|
||||||
</a-select>
|
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
</a-col>
|
</a-col>
|
||||||
<a-col :span="12">
|
<a-col :span="12">
|
||||||
<a-form-item label="收信部门">
|
<a-form-item label="收信部门">
|
||||||
<a-select
|
<ToOrg
|
||||||
v-model:value="
|
v-model:to-user="
|
||||||
formData.template.toParty
|
formData.template.toParty
|
||||||
"
|
"
|
||||||
placeholder="请选择收信部门"
|
:type="formData.type"
|
||||||
>
|
:config-id="formData.configId"
|
||||||
<a-select-option
|
/>
|
||||||
v-for="(
|
|
||||||
item, index
|
|
||||||
) in ROBOT_MSG_TYPE"
|
|
||||||
:key="index"
|
|
||||||
:value="item.value"
|
|
||||||
>
|
|
||||||
{{ item.label }}
|
|
||||||
</a-select-option>
|
|
||||||
</a-select>
|
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
</a-col>
|
</a-col>
|
||||||
</a-row>
|
</a-row>
|
||||||
<a-form-item label="标签推送">
|
<a-form-item label="标签推送">
|
||||||
<a-select
|
<ToTag
|
||||||
v-model:value="formData.template.toTag"
|
v-model:to-user="formData.template.toTag"
|
||||||
placeholder="请选择标签推送"
|
:type="formData.type"
|
||||||
>
|
:config-id="formData.configId"
|
||||||
<a-select-option
|
/>
|
||||||
v-for="(item, index) in ROBOT_MSG_TYPE"
|
|
||||||
:key="index"
|
|
||||||
:value="item.value"
|
|
||||||
>
|
|
||||||
{{ item.label }}
|
|
||||||
</a-select-option>
|
|
||||||
</a-select>
|
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
</template>
|
</template>
|
||||||
<!-- 邮件 -->
|
<!-- 邮件 -->
|
||||||
|
|
@ -325,11 +301,11 @@
|
||||||
/>
|
/>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item
|
<a-form-item
|
||||||
label="模板内容"
|
label="模版内容"
|
||||||
v-if="formData.template.templateType === 'tts'"
|
v-if="formData.template.templateType === 'tts'"
|
||||||
>
|
>
|
||||||
<a-textarea
|
<a-textarea
|
||||||
v-model:value="formData.template.ttsCode"
|
v-model:value="formData.template.message"
|
||||||
show-count
|
show-count
|
||||||
:rows="5"
|
:rows="5"
|
||||||
placeholder="内容中的变量将用于阿里云语音验证码"
|
placeholder="内容中的变量将用于阿里云语音验证码"
|
||||||
|
|
@ -353,11 +329,11 @@
|
||||||
<a-select-option
|
<a-select-option
|
||||||
v-for="(
|
v-for="(
|
||||||
item, index
|
item, index
|
||||||
) in ROBOT_MSG_TYPE"
|
) in templateList"
|
||||||
:key="index"
|
:key="index"
|
||||||
:value="item.value"
|
:value="item.templateCode"
|
||||||
>
|
>
|
||||||
{{ item.label }}
|
{{ item.templateName }}
|
||||||
</a-select-option>
|
</a-select-option>
|
||||||
</a-select>
|
</a-select>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
|
|
@ -377,10 +353,18 @@
|
||||||
label="签名"
|
label="签名"
|
||||||
v-bind="validateInfos['template.signName']"
|
v-bind="validateInfos['template.signName']"
|
||||||
>
|
>
|
||||||
<a-input
|
<a-select
|
||||||
v-model:value="formData.template.signName"
|
v-model:value="formData.template.signName"
|
||||||
placeholder="请输入签名"
|
placeholder="请选择签名"
|
||||||
/>
|
>
|
||||||
|
<a-select-option
|
||||||
|
v-for="(item, index) in signsList"
|
||||||
|
:key="index"
|
||||||
|
:value="item.signName"
|
||||||
|
>
|
||||||
|
{{ item.signName }}
|
||||||
|
</a-select-option>
|
||||||
|
</a-select>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
</template>
|
</template>
|
||||||
<!-- webhook -->
|
<!-- webhook -->
|
||||||
|
|
@ -416,7 +400,8 @@
|
||||||
label="模版内容"
|
label="模版内容"
|
||||||
v-if="
|
v-if="
|
||||||
formData.type !== 'sms' &&
|
formData.type !== 'sms' &&
|
||||||
formData.type !== 'webhook'
|
formData.type !== 'webhook' &&
|
||||||
|
formData.type !== 'voice'
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
<a-textarea
|
<a-textarea
|
||||||
|
|
@ -473,7 +458,7 @@
|
||||||
import { getImage } from '@/utils/comm';
|
import { getImage } from '@/utils/comm';
|
||||||
import { Form } from 'ant-design-vue';
|
import { Form } from 'ant-design-vue';
|
||||||
import { message } from 'ant-design-vue';
|
import { message } from 'ant-design-vue';
|
||||||
import { TemplateFormData } from '../types';
|
import { IVariableDefinitions, TemplateFormData } from '../types';
|
||||||
import {
|
import {
|
||||||
NOTICE_METHOD,
|
NOTICE_METHOD,
|
||||||
TEMPLATE_FIELD_MAP,
|
TEMPLATE_FIELD_MAP,
|
||||||
|
|
@ -486,6 +471,9 @@ import Doc from './doc/index';
|
||||||
import MonacoEditor from '@/components/MonacoEditor/index.vue';
|
import MonacoEditor from '@/components/MonacoEditor/index.vue';
|
||||||
import Attachments from './components/Attachments.vue';
|
import Attachments from './components/Attachments.vue';
|
||||||
import VariableDefinitions from './components/VariableDefinitions.vue';
|
import VariableDefinitions from './components/VariableDefinitions.vue';
|
||||||
|
import ToUser from './components/ToUser.vue';
|
||||||
|
import ToOrg from './components/ToOrg.vue';
|
||||||
|
import ToTag from './components/ToTag.vue';
|
||||||
|
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const route = useRoute();
|
const route = useRoute();
|
||||||
|
|
@ -600,7 +588,7 @@ watch(
|
||||||
format: '%s',
|
format: '%s',
|
||||||
},
|
},
|
||||||
);
|
);
|
||||||
formData.value.variableDefinitions = result;
|
formData.value.variableDefinitions = result as IVariableDefinitions[];
|
||||||
},
|
},
|
||||||
{ deep: true },
|
{ deep: true },
|
||||||
);
|
);
|
||||||
|
|
@ -630,6 +618,36 @@ const getConfigList = async () => {
|
||||||
};
|
};
|
||||||
getConfigList();
|
getConfigList();
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 配置选择改变
|
||||||
|
*/
|
||||||
|
const handleConfigChange = () => {
|
||||||
|
getTemplateList();
|
||||||
|
getSignsList();
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取阿里模板
|
||||||
|
*/
|
||||||
|
const templateList = ref();
|
||||||
|
const getTemplateList = async () => {
|
||||||
|
const { result } = await templateApi.getAliTemplate(
|
||||||
|
formData.value.configId,
|
||||||
|
);
|
||||||
|
templateList.value = result;
|
||||||
|
};
|
||||||
|
getTemplateList();
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取签名
|
||||||
|
*/
|
||||||
|
const signsList = ref();
|
||||||
|
const getSignsList = async () => {
|
||||||
|
const { result } = await templateApi.getSigns(formData.value.configId);
|
||||||
|
signsList.value = result;
|
||||||
|
};
|
||||||
|
getSignsList();
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 表单提交
|
* 表单提交
|
||||||
*/
|
*/
|
||||||
|
|
@ -638,6 +656,8 @@ const handleSubmit = () => {
|
||||||
validate()
|
validate()
|
||||||
.then(async () => {
|
.then(async () => {
|
||||||
// console.log('formData.value: ', formData.value);
|
// console.log('formData.value: ', formData.value);
|
||||||
|
formData.value.template.ttsCode =
|
||||||
|
formData.value.template.templateCode;
|
||||||
btnLoading.value = true;
|
btnLoading.value = true;
|
||||||
let res;
|
let res;
|
||||||
if (!formData.value.id) {
|
if (!formData.value.id) {
|
||||||
|
|
|
||||||
|
|
@ -14,6 +14,7 @@ interface IVariableDefinitions {
|
||||||
name: string;
|
name: string;
|
||||||
type: string;
|
type: string;
|
||||||
format: string;
|
format: string;
|
||||||
|
value?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface IMarkDown {
|
interface IMarkDown {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue