visualization-design/src/views/components/Network.vue

<template>
  <div class="network-component">
    <div class="form-item mt-8">
      <label>
        {{ modelValue.type === 'subscribe' ? '数据通信' : '数据发送' }}
      </label>
      <t-select-input
        v-if="mode"
        v-model:inputValue="modelValue.name"
        :value="modelValue.name"
        placeholder="我的数据发送"
        allow-input
        clearable
        v-model:popup-visible="popupVisible"
        @focus="popupVisible = true"
        @blur="popupVisible = false"
        @input-change="onInput"
        @clear="
          modelValue.id = undefined;
          modelValue._id = undefined;
        "
      >
        <template #panel>
          <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)"
            >
              名称: {{ item.name }}
              <div class="desc">地址: {{ item.url }}</div>

              <span class="del" @click.stop="onDelNetWork(item, i)">
                <delete-icon />
                <!-- <t-icon name="delete" /> -->
              </span>
            </li>
            <li
              v-if="networkList.length >= 10"
              style="line-height: 1.5; padding: 8px; border-radius: 2px"
              :key="-1"
            >
              <div class="desc">...</div>
            </li>
            <li
              v-if="!networkList.length"
              style="line-height: 1.5; padding: 8px; border-radius: 2px"
              :key="-1"
            >
              <div class="desc">暂无数据</div>
            </li>
          </ul>
        </template>
      </t-select-input>
      <t-input v-else v-model="modelValue.name" placeholder="名称" />
    </div>

    <div class="form-item mt-8">
      <label>通信方式</label>
      <t-select
        v-model="modelValue.protocol"
        placeholder="MQTT"
        @change="protocolChange"
      >
        <t-option key="mqtt" value="mqtt" label="MQTT" />
        <t-option key="websocket" value="websocket" label="Websocket" />
        <t-option key="http" value="http" label="HTTP" />
      </t-select>
    </div>
    <div class="form-item mt-8">
      <label>URL地址</label>
      <t-input
        :format="urlFormat"
        :placeholder="
          modelValue.protocol !== 'http'
            ? isSafeProtocol()
              ? '必须是wss协议'
              : '必须是ws协议'
            : '请输入'
        "
        v-model="modelValue.url"
      />
    </div>
    <template v-if="modelValue.protocol === 'websocket'">
      <div class="form-item mt-8">
        <label>protocols</label>
        <t-input v-model="modelValue.options.protocols" />
      </div>
    </template>
    <template v-else-if="modelValue.protocol === 'http'">
      <div class="form-item mt-8">
        <label>请求方式</label>
        <t-select v-model="modelValue.method" @change="httpMethodChange">
          <t-option key="GET" value="GET" label="GET" />
          <t-option key="POST" value="POST" label="POST" />
        </t-select>
      </div>
      <div class="form-item mt-8">
        <label>请求头</label>
        <!-- <t-textarea
          v-model="modelValue.headers"
          :autosize="{ minRows: 3, maxRows: 5 }"
          placeholder="请输入"
        /> -->
        <CodeEditor
          :json="true"
          v-model="modelValue.headers"
          class="mt-4"
          style="height: 50px"
        />
      </div>
      <div class="form-item mt-8 desc">
        <label></label>
        支持设置动态参数，例如：{"Authorization": "Bearer ${token}"}
      </div>
      <div v-if="!mode && modelValue.method === 'POST'" class="form-item mt-8">
        <label>请求体</label>
        <!-- <t-textarea
          v-model="modelValue.body"
          :autosize="{ minRows: 3, maxRows: 5 }"
          placeholder="请输入"
        /> -->
        <CodeEditor
          :json="true"
          v-model="modelValue.body"
          class="mt-4"
          style="height: 50px"
        />
      </div>
      <div
        v-if="!mode && modelValue.method === 'POST'"
        class="form-item mt-8 desc"
      >
        <label></label>
        支持设置动态参数，例如：{"value": "${value}"}
      </div>
    </template>
    <template v-else>
      <div class="form-item mt-8">
        <label>Client Id</label>
        <t-input v-model="modelValue.options.clientId" />
      </div>
      <div class="form-item mt-8">
        <label>自动生成</label>
        <t-switch
          class="mt-8 ml-8"
          v-model="modelValue.options.customClientId"
          size="small"
        />
      </div>
      <div class="form-item mt-8">
        <label>用户名</label>
        <t-input v-model="modelValue.options.username" />
      </div>
      <div class="form-item mt-8">
        <label>密码</label>
        <t-input v-model="modelValue.options.password" />
      </div>
      <div class="form-item mt-8">
        <label>Topics</label>
        <t-input v-model="modelValue.topics" />
      </div>
    </template>
    <div class="form-item mt-8" v-if="mode">
      <label> </label>
      <div>
        <t-button @click="onSave">保存到我的数据发送</t-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onBeforeMount, ref } from 'vue';
import axios from 'axios';
import { debounce } from '@/services/debouce';
import { MessagePlugin } from 'tdesign-vue-next';
import CodeEditor from '@/views/components/common/CodeEditor.vue';
import { DeleteIcon } from 'tdesign-icons-vue-next';
import { transformData } from '@/services/utils';

const { modelValue, mode } = defineProps<{
  modelValue: any;
  mode?: any;
}>();

const emit = defineEmits(['update:modelValue', 'change']);
const popupVisible = ref<boolean>(false);
const networkList = ref<any[]>([]);

onBeforeMount(() => {
  modelValue.id = modelValue.id || modelValue._id;
  if (mode) {
    getNetworks();
  }
});

const protocolChange = (protocol: string) => {
  if (protocol === 'http') {
    Object.assign(modelValue, {
      httpTimeInterval: 1000,
      headers: '',
      method: 'GET',
      body: '',
    });
  } else if (protocol === 'websocket') {
    // modelValue.url = '';
  } else {
    Object.assign(modelValue, {
      options: {
        clientId: '',
        username: '',
        password: '',
        customClientId: false,
      },
    });
  }
};

const httpMethodChange = (method: string) => {
  if (method === 'GET') {
    modelValue.body = undefined;
  }
};

const onSave = async () => {
  emit('update:modelValue', modelValue);
  emit('change', modelValue);

  let ret: any;
  const data = transformData(modelValue,'toNetwork');
  // 保存到我的数据源
  if (modelValue.id) {
    ret = await axios.post(`/api/data/datasource/update`, data);
  } else {
    ret = await axios.post(`/api/data/datasource/add`, data);
  }

  if (ret) {
    MessagePlugin.success('保存成功！');
  }
};

const onInput = (text: string) => {
  debounce(getNetworks, 300);
};

// 请求我的数据源接口
const getNetworks = async () => {
  const body: any = {
    type: modelValue.type,
    projection: "id,data,name,type",
  };
  if (modelValue.name) {
    body.name = modelValue.name;
  }
  const ret: any = await axios.post(`/api/data/datasource/list`, body, {
    params: {
      current: 1,
      pageSize: 10,
    },
  });
  if (ret?.list) {
    const list = [];
    for (const item of ret.list) {
      item.id = item.id || item._id;
      list.push(transformData(item,'toMetaNetwork'));
    }
    networkList.value = list;
  }
};

const onSelect = (item: any) => {
  Object.assign(modelValue, item);
  popupVisible.value = false;
};

const onDelNetWork = async (item: any, i: number) => {
  const ret: any = await axios.post(`/api/data/datasource/delete`, {
    id: item._id || item.id,
  });
  if (ret) {
    networkList.value.splice(i, 1);
  }
};

const isSafeProtocol = () => {
  return document.location.protocol === 'https:' ? true : false;
};

const urlFormat = (val) => {
  if (modelValue.protocol === 'mqtt') {
    let reg = /^ws\:.*/;
    if (isSafeProtocol()) {
      reg = /^wss\:.*/;
    }
    if (reg.test(val)) {
      return val;
    } else {
      return '';
    }
  } else {
    return val;
  }
};
</script>
<style lang="postcss" scoped>
.network-component {
}
</style>