|
@@ -2,7 +2,7 @@
|
|
<div class="network-component">
|
|
<div class="network-component">
|
|
<div class="form-item mt-8">
|
|
<div class="form-item mt-8">
|
|
<label>
|
|
<label>
|
|
- {{ modelValue.type === 'subscribe' ? $t('数据获取') : $t('数据发送') }}
|
|
|
|
|
|
+ {{ modelValue.type === 'subscribe' ? $t('数据获取') : $t('发送到') }}
|
|
</label>
|
|
</label>
|
|
<t-select-input
|
|
<t-select-input
|
|
v-if="mode"
|
|
v-if="mode"
|
|
@@ -16,20 +16,31 @@
|
|
@blur="popupVisible = false"
|
|
@blur="popupVisible = false"
|
|
@input-change="onInput"
|
|
@input-change="onInput"
|
|
@clear="
|
|
@clear="
|
|
- modelValue.id = undefined;
|
|
|
|
- modelValue._id = undefined;
|
|
|
|
|
|
+ modelValue.name = undefined;
|
|
"
|
|
"
|
|
>
|
|
>
|
|
<template #panel>
|
|
<template #panel>
|
|
<ul style="padding: 4px">
|
|
<ul style="padding: 4px">
|
|
- <li class="hover-background item" style="line-height: 1.5; padding: 8px; border-radius: 2px" v-for="(item, i) in networkList" :key="item.url" @click="() => onSelect(item)">
|
|
|
|
-{{$t(' 名称: ')}}{{ item.name }}
|
|
|
|
- <div class="desc">{{$t('地址: ')}}{{ item.url }}</div>
|
|
|
|
|
|
+ <li class="hover-background item" @click="() => onSelect({protocol:'http',name:'自定义'})">
|
|
|
|
+ 自定义
|
|
|
|
+ </li>
|
|
|
|
+ <t-divider></t-divider>
|
|
|
|
+ <li v-if="hasIot" class="hover-background item" @click="() => onSelect({protocol:'iot',name:'物联网平台'})">
|
|
|
|
+ 物联网平台
|
|
|
|
+ </li>
|
|
|
|
+ <li
|
|
|
|
+ class="hover-background item"
|
|
|
|
+ style="line-height: 1.5; padding: 8px; border-radius: 2px"
|
|
|
|
+ v-for="(item, i) in networkList"
|
|
|
|
+ :key="item.url"
|
|
|
|
+ @click="() => onSelect(item)"
|
|
|
|
+ >
|
|
|
|
+ 名称: {{ item.name }}
|
|
|
|
+ <div v-if="item.url" class="desc">地址: {{ item.url }}</div>
|
|
|
|
|
|
- <span class="del" @click.stop="onDelNetWork(item, i)">
|
|
|
|
|
|
+ <!-- <span class="del" @click.stop="onDelNetWork(item, i)">
|
|
<delete-icon />
|
|
<delete-icon />
|
|
- <!-- <t-icon name="delete" /> -->
|
|
|
|
- </span>
|
|
|
|
|
|
+ </span> -->
|
|
</li>
|
|
</li>
|
|
<li
|
|
<li
|
|
v-if="networkList.length >= 10"
|
|
v-if="networkList.length >= 10"
|
|
@@ -46,9 +57,9 @@
|
|
</t-select-input>
|
|
</t-select-input>
|
|
<t-input v-else v-model="modelValue.name" :placeholder="$t('名称')"></t-input>
|
|
<t-input v-else v-model="modelValue.name" :placeholder="$t('名称')"></t-input>
|
|
</div>
|
|
</div>
|
|
-
|
|
|
|
- <div class="form-item mt-8">
|
|
|
|
- <label>{{$t( '通信方式' )}}</label>
|
|
|
|
|
|
+ <template v-if="modelValue.protocol&&modelValue.protocol!=='iot'">
|
|
|
|
+ <div v-if="!modelValue.unmodifiable" class="form-item mt-8">
|
|
|
|
+ <label>通信方式</label>
|
|
<t-select
|
|
<t-select
|
|
v-model="modelValue.protocol"
|
|
v-model="modelValue.protocol"
|
|
placeholder="MQTT"
|
|
placeholder="MQTT"
|
|
@@ -59,26 +70,28 @@
|
|
<t-option key="http" value="http" label="HTTP" />
|
|
<t-option key="http" value="http" label="HTTP" />
|
|
</t-select>
|
|
</t-select>
|
|
</div>
|
|
</div>
|
|
- <div class="form-item mt-8">
|
|
|
|
- <label>URL{{$t('地址')}}</label>
|
|
|
|
- <t-input :format="urlFormat" :placeholder="
|
|
|
|
- modelValue.protocol !== $t('http')
|
|
|
|
|
|
+ <div v-if="!modelValue.unmodifiable" class="form-item mt-8">
|
|
|
|
+ <label>URL地址</label>
|
|
|
|
+ <t-input
|
|
|
|
+ :format="urlFormat"
|
|
|
|
+ :placeholder="
|
|
|
|
+ modelValue.protocol !== 'http'
|
|
? isSafeProtocol()
|
|
? isSafeProtocol()
|
|
? $t('必须是wss协议')
|
|
? $t('必须是wss协议')
|
|
: $t('必须是ws协议')
|
|
: $t('必须是ws协议')
|
|
: $t('请输入')
|
|
: $t('请输入')
|
|
" v-model="modelValue.url"></t-input>
|
|
" v-model="modelValue.url"></t-input>
|
|
</div>
|
|
</div>
|
|
- <template v-if="modelValue.protocol === 'websocket'">
|
|
|
|
- <div class="form-item mt-8">
|
|
|
|
|
|
+ <template v-if="modelValue.protocol === 'websocket'&&modelValue.options">
|
|
|
|
+ <div v-if="!modelValue.unmodifiable" class="form-item mt-8">
|
|
<label>protocols</label>
|
|
<label>protocols</label>
|
|
<t-input v-model="modelValue.options.protocols" />
|
|
<t-input v-model="modelValue.options.protocols" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
<template v-else-if="modelValue.protocol === 'http'">
|
|
<template v-else-if="modelValue.protocol === 'http'">
|
|
<div class="form-item mt-8">
|
|
<div class="form-item mt-8">
|
|
- <label>{{$t('请求方式')}}</label>
|
|
|
|
- <t-select v-model="modelValue.method" @change="httpMethodChange">
|
|
|
|
|
|
+ <label>请求方式</label>
|
|
|
|
+ <t-select :disabled="modelValue.unmodifiable" v-model="modelValue.method" @change="httpMethodChange">
|
|
<t-option key="GET" value="GET" label="GET" />
|
|
<t-option key="GET" value="GET" label="GET" />
|
|
<t-option key="POST" value="POST" label="POST" />
|
|
<t-option key="POST" value="POST" label="POST" />
|
|
</t-select>
|
|
</t-select>
|
|
@@ -129,7 +142,8 @@
|
|
{{$t('支持设置动态参数')}},{{$t('例如')}}:{"value": "${value}"}
|
|
{{$t('支持设置动态参数')}},{{$t('例如')}}:{"value": "${value}"}
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
- <template v-else>
|
|
|
|
|
|
+ <template v-else-if="modelValue.protocol === 'mqtt'">
|
|
|
|
+ <template v-if="modelValue.options&&!modelValue.unmodifiable">
|
|
<div class="form-item mt-8">
|
|
<div class="form-item mt-8">
|
|
<label>Client Id</label>
|
|
<label>Client Id</label>
|
|
<t-input v-model="modelValue.options.clientId" />
|
|
<t-input v-model="modelValue.options.clientId" />
|
|
@@ -146,17 +160,19 @@
|
|
<label>{{$t('密码')}}</label>
|
|
<label>{{$t('密码')}}</label>
|
|
<t-input v-model="modelValue.options.password"></t-input>
|
|
<t-input v-model="modelValue.options.password"></t-input>
|
|
</div>
|
|
</div>
|
|
|
|
+ </template>
|
|
<div class="form-item mt-8">
|
|
<div class="form-item mt-8">
|
|
<label>Topics</label>
|
|
<label>Topics</label>
|
|
<t-input v-model="modelValue.topics" />
|
|
<t-input v-model="modelValue.topics" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
- <div class="form-item mt-8" v-if="mode">
|
|
|
|
|
|
+ </template>
|
|
|
|
+ <!-- <div class="form-item mt-8" v-if="mode">
|
|
<label> </label>
|
|
<label> </label>
|
|
<div>
|
|
<div>
|
|
<t-button @click="onSave">{{$t('保存到我的数据发送')}}</t-button>
|
|
<t-button @click="onSave">{{$t('保存到我的数据发送')}}</t-button>
|
|
</div>
|
|
</div>
|
|
- </div>
|
|
|
|
|
|
+ </div> -->
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
@@ -168,6 +184,7 @@ import { MessagePlugin } from 'tdesign-vue-next';
|
|
import CodeEditor from '@/views/components/common/CodeEditor.vue';
|
|
import CodeEditor from '@/views/components/common/CodeEditor.vue';
|
|
import { DeleteIcon } from 'tdesign-icons-vue-next';
|
|
import { DeleteIcon } from 'tdesign-icons-vue-next';
|
|
import { transformData } from '@/services/utils';
|
|
import { transformData } from '@/services/utils';
|
|
|
|
+import { deepClone } from '@meta2d/core';
|
|
|
|
|
|
const { modelValue, mode } = defineProps<{
|
|
const { modelValue, mode } = defineProps<{
|
|
modelValue: any;
|
|
modelValue: any;
|
|
@@ -237,8 +254,30 @@ const onInput = (text: string) => {
|
|
debounce(getNetworks, 300);
|
|
debounce(getNetworks, 300);
|
|
};
|
|
};
|
|
|
|
|
|
|
|
+const hasIot = ref(false);
|
|
|
|
+
|
|
// 请求我的数据源接口
|
|
// 请求我的数据源接口
|
|
const getNetworks = async () => {
|
|
const getNetworks = async () => {
|
|
|
|
+ let arr = [];
|
|
|
|
+ meta2d.store.data.networks.forEach((network)=>{
|
|
|
|
+ if(['mqtt','websocket','http'].includes(network.protocol)&&network.method!=="POST"){
|
|
|
|
+ let net:any = deepClone(network);
|
|
|
|
+ if(net.protocol === 'http'){
|
|
|
|
+ net.method = 'POST'
|
|
|
|
+ }
|
|
|
|
+ net.unmodifiable = true;
|
|
|
|
+ net.type = '';
|
|
|
|
+ net.value ='';
|
|
|
|
+ net.tem_index='';
|
|
|
|
+ net.label = '';
|
|
|
|
+ arr.push(net);
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ if(meta2d.store.data.iot?.tree?.length){
|
|
|
|
+ hasIot.value = true;
|
|
|
|
+ }
|
|
|
|
+ networkList.value =arr;// deepClone(meta2d.store.data.networks);
|
|
|
|
+ return;
|
|
const body: any = {
|
|
const body: any = {
|
|
type: modelValue.type,
|
|
type: modelValue.type,
|
|
projection: "id,data,name,type",
|
|
projection: "id,data,name,type",
|
|
@@ -263,6 +302,11 @@ const getNetworks = async () => {
|
|
};
|
|
};
|
|
|
|
|
|
const onSelect = (item: any) => {
|
|
const onSelect = (item: any) => {
|
|
|
|
+ for (let key in modelValue) {
|
|
|
|
+ if (modelValue.hasOwnProperty(key)) {
|
|
|
|
+ delete modelValue[key];
|
|
|
|
+ }
|
|
|
|
+ }
|
|
Object.assign(modelValue, item);
|
|
Object.assign(modelValue, item);
|
|
popupVisible.value = false;
|
|
popupVisible.value = false;
|
|
};
|
|
};
|