From 8bef5114fa98b3579fb5c4396ad309a70cf61dec Mon Sep 17 00:00:00 2001 From: jackhoo_98 Date: Thu, 2 Mar 2023 15:46:43 +0800 Subject: [PATCH 1/4] =?UTF-8?q?feat:=20=E6=95=B0=E6=8D=AE=E9=87=87?= =?UTF-8?q?=E9=9B=86=20=E4=BB=AA=E8=A1=A8=E7=9B=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/data-collect/dashboard.ts | 6 + .../DataCollect/Dashboard/components/Card.vue | 165 ++++++++++++++++++ .../Dashboard/components/TopCard.vue | 98 +++++++++++ src/views/DataCollect/Dashboard/index.less | 38 ++++ src/views/DataCollect/Dashboard/index.vue | 41 +++++ src/views/DataCollect/Dashboard/tool.ts | 155 ++++++++++++++++ src/views/DataCollect/Dashboard/typings.d.ts | 18 ++ src/views/link/AccessConfig/index.vue | 4 +- src/views/link/DashBoard/components/Cpu.vue | 9 +- src/views/link/DashBoard/components/Jvm.vue | 8 +- .../link/DashBoard/components/Network.vue | 18 +- 11 files changed, 528 insertions(+), 32 deletions(-) create mode 100644 src/api/data-collect/dashboard.ts create mode 100644 src/views/DataCollect/Dashboard/components/Card.vue create mode 100644 src/views/DataCollect/Dashboard/components/TopCard.vue create mode 100644 src/views/DataCollect/Dashboard/index.less create mode 100644 src/views/DataCollect/Dashboard/index.vue create mode 100644 src/views/DataCollect/Dashboard/tool.ts create mode 100644 src/views/DataCollect/Dashboard/typings.d.ts diff --git a/src/api/data-collect/dashboard.ts b/src/api/data-collect/dashboard.ts new file mode 100644 index 00000000..ceb68ca0 --- /dev/null +++ b/src/api/data-collect/dashboard.ts @@ -0,0 +1,6 @@ +import server from '@/utils/request'; + +export const queryCount = (type: string, data: any) => + server.post(`/data-collect/${type}/_count`, data); + +export const dashboard = (data: any) => server.post(`/dashboard/_multi`, data); diff --git a/src/views/DataCollect/Dashboard/components/Card.vue b/src/views/DataCollect/Dashboard/components/Card.vue new file mode 100644 index 00000000..57448ee1 --- /dev/null +++ b/src/views/DataCollect/Dashboard/components/Card.vue @@ -0,0 +1,165 @@ + + + + + diff --git a/src/views/DataCollect/Dashboard/components/TopCard.vue b/src/views/DataCollect/Dashboard/components/TopCard.vue new file mode 100644 index 00000000..1138eae1 --- /dev/null +++ b/src/views/DataCollect/Dashboard/components/TopCard.vue @@ -0,0 +1,98 @@ + + + + + diff --git a/src/views/DataCollect/Dashboard/index.less b/src/views/DataCollect/Dashboard/index.less new file mode 100644 index 00000000..9709ead9 --- /dev/null +++ b/src/views/DataCollect/Dashboard/index.less @@ -0,0 +1,38 @@ +.media-dash-board { + .top-card-items { + margin-bottom: 12px; + height: 100px; + .top-card-item { + width: 25%; + padding: 6px 24px; + border: 1px solid #e3e3e3; + + .top-card-top { + display: flex; + padding: 12px 0; + + .top-card-top-left { + width: 80px; + } + + .top-card-top-right { + .top-card-total { + font-weight: bold; + font-size: 20px; + } + } + } + + .top-card-bottom { + display: flex; + justify-content: space-between; + padding: 12px 0; + border-top: 1px solid #e3e3e3; + } + } + } + + .media-dash-board-body { + border: 1px solid #f0f0f0; + } +} diff --git a/src/views/DataCollect/Dashboard/index.vue b/src/views/DataCollect/Dashboard/index.vue new file mode 100644 index 00000000..adacc21f --- /dev/null +++ b/src/views/DataCollect/Dashboard/index.vue @@ -0,0 +1,41 @@ + + + + + diff --git a/src/views/DataCollect/Dashboard/tool.ts b/src/views/DataCollect/Dashboard/tool.ts new file mode 100644 index 00000000..076c6947 --- /dev/null +++ b/src/views/DataCollect/Dashboard/tool.ts @@ -0,0 +1,155 @@ +import moment from 'moment'; +import * as echarts from 'echarts'; + +const getParams = (dt: any) => { + switch (dt.type) { + case 'today': + return { + limit: 24, + interval: '1h', + format: 'HH:mm', + }; + case 'week': + return { + limit: 7, + interval: '1d', + format: 'MM-dd', + }; + case 'hour': + return { + limit: 60, + interval: '1m', + format: 'HH:mm', + }; + default: + const time = dt.end - dt.start; + const hour = 60 * 60 * 1000; + const days = hour * 24; + const year = days * 365; + if (time <= hour) { + return { + limit: Math.abs(Math.ceil(time / (60 * 60))), + interval: '1m', + format: 'HH:mm', + }; + } else if (time > hour && time <= days) { + return { + limit: Math.abs(Math.ceil(time / hour)), + interval: '1h', + format: 'HH:mm', + }; + } else if (time >= year) { + return { + limit: Math.abs(Math.ceil(time / days / 31)) + 1, + interval: '1M', + format: 'yyyy年-M月', + }; + } else { + return { + limit: Math.abs(Math.ceil(time / days)) + 1, + interval: '1d', + format: 'MM-dd', + }; + } + } +}; + +export const getTimeByType = (type) => { + switch (type) { + case 'hour': + return moment().subtract(1, 'hours'); + case 'week': + return moment().subtract(6, 'days'); + case 'month': + return moment().subtract(29, 'days'); + case 'year': + return moment().subtract(365, 'days'); + default: + return moment().startOf('day'); + } +}; + +export const pointParams = (data) => [ + { + dashboard: 'collector', + object: 'pointData', + measurement: 'quantity', + dimension: 'agg', + params: { + limit: getParams(data.time).limit, + from: data.time.start, + to: data.time.end, + interval: getParams(data.time).interval, + format: getParams(data.time).format, + }, + }, +]; + +export const pointOptionsSeries = { + type: 'line', + smooth: true, + color: '#60DFC7', + areaStyle: { + color: { + type: 'linear', + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [ + { + offset: 0, + color: '#60DFC7', // 100% 处的颜色 + }, + { + offset: 1, + color: '#FFFFFF', // 0% 处的颜色 + }, + ], + global: false, // 缺省为 false + }, + }, +}; + +export const defaultParams = { + terms: [ + { + column: 'runningState', + termType: 'not', + value: 'running', + }, + ], +}; + +export const statusData = ref([ + [ + { + type: 'channel', + title: '异常通道', + status: 'error', + label: '通道数量', + value: 0, + total: 0, + }, + ], + [ + { + type: 'collector', + title: '异常采集器', + status: 'error', + label: '采集器数量', + value: 0, + total: 0, + }, + ], + [ + { + type: 'point', + title: '异常点位', + status: 'error', + label: '采集点位', + value: 0, + total: 0, + }, + ], +]); diff --git a/src/views/DataCollect/Dashboard/typings.d.ts b/src/views/DataCollect/Dashboard/typings.d.ts new file mode 100644 index 00000000..dd0a9484 --- /dev/null +++ b/src/views/DataCollect/Dashboard/typings.d.ts @@ -0,0 +1,18 @@ +export type Agg = { + duration: number; + total: number; +}; + +export type AggPlaying = { + playerTotal: number; + playingTotal: number; +}; + +export type Footer = { + title: string; + value: number | string; + total: number | string; + status?: 'default' | 'error' | 'success' | 'warning' | 'processing' | ''; + type: string; + label: string; +}; diff --git a/src/views/link/AccessConfig/index.vue b/src/views/link/AccessConfig/index.vue index 0f75d961..aaa46df1 100644 --- a/src/views/link/AccessConfig/index.vue +++ b/src/views/link/AccessConfig/index.vue @@ -316,7 +316,7 @@ const getActions = (data: Partial>): ActionsType[] => { const getProvidersList = async () => { const res = await getProviders(); - providersList = res.result; + providersList.value = res.result; }; getProvidersList(); @@ -337,7 +337,7 @@ const handlEye = (id: string) => { const getDescription = (slotProps: Record) => slotProps.description ? slotProps.description - : providersList?.find( + : providersList.value?.find( (item: Record) => item.id === slotProps.provider, )?.description; diff --git a/src/views/link/DashBoard/components/Cpu.vue b/src/views/link/DashBoard/components/Cpu.vue index 6f62f3e5..995ea05f 100644 --- a/src/views/link/DashBoard/components/Cpu.vue +++ b/src/views/link/DashBoard/components/Cpu.vue @@ -33,8 +33,7 @@ > - -
+
@@ -54,7 +53,6 @@ import { const chartRef = ref>({}); const loading = ref(false); -const empty = ref(false); const data = ref({ type: 'hour', time: [null, null], @@ -108,7 +106,6 @@ const handleCpuOptions = (optionsData, xAxis) => { if (chart) { const myChart = echarts.init(chart); const dataKeys = Object.keys(optionsData); - const options = { xAxis: { type: 'category', @@ -143,7 +140,6 @@ const handleCpuOptions = (optionsData, xAxis) => { : typeDataLine, }; myChart.setOption(options); - xAxis.length === 0 && (empty.value = true); window.addEventListener('resize', function () { myChart.resize(); }); @@ -190,7 +186,4 @@ watch( margin-top: 8px; } } -.empty { - height: 300px; -} diff --git a/src/views/link/DashBoard/components/Jvm.vue b/src/views/link/DashBoard/components/Jvm.vue index 44671b76..d4538c59 100644 --- a/src/views/link/DashBoard/components/Jvm.vue +++ b/src/views/link/DashBoard/components/Jvm.vue @@ -33,8 +33,7 @@ > - -
+
@@ -53,7 +52,6 @@ import { } from './tool.ts'; const chartRef = ref>({}); -const empty = ref(false); const loading = ref(false); const data = ref({ type: 'hour', @@ -147,7 +145,6 @@ const handleJVMOptions = (optionsData, xAxis) => { : typeDataLine, }; myChart.setOption(options); - xAxis.length === 0 && (empty.value = true); window.addEventListener('resize', function () { myChart.resize(); }); @@ -194,7 +191,4 @@ watch( margin-top: 8px; } } -.empty { - height: 300px; -} diff --git a/src/views/link/DashBoard/components/Network.vue b/src/views/link/DashBoard/components/Network.vue index 46188f4f..625c1de5 100644 --- a/src/views/link/DashBoard/components/Network.vue +++ b/src/views/link/DashBoard/components/Network.vue @@ -37,18 +37,13 @@ @change="pickerTimeChange" >
- -
+
@@ -61,13 +56,11 @@ import { typeDataLine, areaStyle, networkParams, - arrayReverse, } from './tool.ts'; import moment from 'moment'; import * as echarts from 'echarts'; const chartRef = ref>({}); -const empty = ref(false); const loading = ref(false); const data = ref({ type: 'bytesRead', @@ -134,7 +127,6 @@ const setOptions = (data, key) => ({ const handleNetworkOptions = (optionsData, xAxis) => { const chart = chartRef.value; - if (chart) { const myChart = echarts.init(chart); const dataKeys = Object.keys(optionsData); @@ -148,7 +140,7 @@ const handleNetworkOptions = (optionsData, xAxis) => { type: 'value', }, grid: { - left: '80px', + left: '100px', right: '50px', }, tooltip: { @@ -161,7 +153,6 @@ const handleNetworkOptions = (optionsData, xAxis) => { : typeDataLine, }; myChart.setOption(options); - // xAxis.length === 0 && (empty.value = true); window.addEventListener('resize', function () { myChart.resize(); }); @@ -215,7 +206,4 @@ watch( display: flex; align-items: center; } -.empty { - height: 300px; -} From 21ae942d98cffadc11dc91ff5fabbf12174579d2 Mon Sep 17 00:00:00 2001 From: jackhoo_98 Date: Thu, 2 Mar 2023 17:01:12 +0800 Subject: [PATCH 2/4] =?UTF-8?q?feat:=20=E9=80=9A=E9=81=93=E7=AE=A1?= =?UTF-8?q?=E7=90=86=20todo?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/data-collect/channel.ts | 10 + .../DataCollect/Channel/Detail/index.vue | 1332 +++++++++++++++++ src/views/DataCollect/Channel/data.ts | 315 ++++ src/views/DataCollect/Channel/index.vue | 336 +++++ src/views/DataCollect/Channel/type.d.ts | 38 + 5 files changed, 2031 insertions(+) create mode 100644 src/api/data-collect/channel.ts create mode 100644 src/views/DataCollect/Channel/Detail/index.vue create mode 100644 src/views/DataCollect/Channel/data.ts create mode 100644 src/views/DataCollect/Channel/index.vue create mode 100644 src/views/DataCollect/Channel/type.d.ts diff --git a/src/api/data-collect/channel.ts b/src/api/data-collect/channel.ts new file mode 100644 index 00000000..5c9a5312 --- /dev/null +++ b/src/api/data-collect/channel.ts @@ -0,0 +1,10 @@ +import server from '@/utils/request'; + +export const queryChannel = (type: string, data: any) => + server.post(`/data-collect/channel/_query`, data); + +export const removeChannel = (type: string, data: any) => + server.remove(`/data-collect/channel//${id}`); + +export const updateChannel = (type: string, data: any) => + server.patch(`/data-collect/channel//${id}`, data); diff --git a/src/views/DataCollect/Channel/Detail/index.vue b/src/views/DataCollect/Channel/Detail/index.vue new file mode 100644 index 00000000..48f32450 --- /dev/null +++ b/src/views/DataCollect/Channel/Detail/index.vue @@ -0,0 +1,1332 @@ + + + + + diff --git a/src/views/DataCollect/Channel/data.ts b/src/views/DataCollect/Channel/data.ts new file mode 100644 index 00000000..9bd25bd6 --- /dev/null +++ b/src/views/DataCollect/Channel/data.ts @@ -0,0 +1,315 @@ +export const Configuration = { + parserType: undefined, + port: undefined, + host: undefined, + publicPort: '', + publicHost: '', + remoteHost: '', + remotePort: '', + secure: false, + username: '', + password: '', + topicPrefix: '', + maxMessageSize: 8192, + certId: undefined, + privateKeyAlias: '', + clientId: '', + parserConfiguration: { + delimited: '', + lang: '', + script: '', + size: '', + length: '4', + offset: '0', + little: 'false', + }, +}; + +export const FormStates = { + name: '', + type: 'UDP', + shareCluster: true, + description: '', +}; + +export const FormStates2 = { + serverId: undefined, + configuration: Configuration, +}; + +export const TCPList = [ + 'TCP_SERVER', + 'WEB_SOCKET_SERVER', + 'HTTP_SERVER', + 'MQTT_SERVER', +]; +export const UDPList = ['UDP', 'COAP_SERVER']; + +const VisibleMost = [ + 'COAP_SERVER', + 'MQTT_SERVER', + 'WEB_SOCKET_SERVER', + 'TCP_SERVER', + 'UDP', + 'HTTP_SERVER', +]; + +export const VisibleData = { + parserType: ['TCP_SERVER'], + port: VisibleMost, + host: VisibleMost, + publicPort: VisibleMost, + publicHost: VisibleMost, + serverId: ['MQTT_CLIENT'], + remoteHost: ['MQTT_CLIENT'], + remotePort: ['MQTT_CLIENT'], + secure: ['TCP_SERVER', 'UDP', 'COAP_SERVER'], + username: ['MQTT_CLIENT'], + password: ['MQTT_CLIENT'], + topicPrefix: ['MQTT_CLIENT'], + maxMessageSize: ['MQTT_SERVER', 'MQTT_CLIENT'], + clientId: ['MQTT_CLIENT'], + delimited: ['DELIMITED'], + lang: ['SCRIPT'], + script: ['SCRIPT'], + size: ['FIXED_LENGTH'], + length: ['LENGTH_FIELD'], + offset: ['LENGTH_FIELD'], + little: ['LENGTH_FIELD'], +}; + +export const ParserTypeOptions = [ + { value: 'DIRECT', label: '不处理' }, + { value: 'DELIMITED', label: '分隔符' }, + { value: 'SCRIPT', label: '自定义脚本' }, + { value: 'FIXED_LENGTH', label: '固定长度' }, + { value: 'LENGTH_FIELD', label: '长度字段' }, +]; +export const LengthOptions = [ + { value: '1', label: '1' }, + { value: '2', label: '2' }, + { value: '3', label: '3' }, + { value: '4', label: '4' }, + { value: '8', label: '8' }, +]; +export const LittleOptions = [ + { label: '大端', value: 'false' }, + { label: '小端', value: 'true' }, +]; + +export const isVisible = ( + LastName: string, + dependencies: string | boolean | undefined, +) => VisibleData[LastName].includes(dependencies); + +export const Validator = { + regIp: new RegExp( + /((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})(\.((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})){3}/, + ), + regDomain: new RegExp( + /[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+\.?/, + ), + regOnlyNumber: new RegExp(/^\d+$/), +}; + +export const Rules = { + name: [ + { + required: true, + message: '请输入名称', + }, + { + max: 64, + message: '最大可输入64个字符', + }, + ], + type: [ + { + required: true, + message: '请选择类型', + }, + ], + shareCluster: [ + { + required: true, + message: '请选择集群', + }, + ], + host: [ + { + required: true, + message: '请选择本地地址', + }, + ], + port: [ + { + required: true, + message: '请选择本地端口', + }, + ], + publicHost: [ + { + required: true, + message: '请输入公网地址', + }, + { + pattern: Validator.regIp || Validator.regDomain, + message: '请输入IP或者域名', + }, + ], + publicPort: [ + { + required: true, + message: '请输入公网端口', + }, + { + pattern: Validator.regOnlyNumber, + message: '请输入1-65535之间的正整数', + }, + ], + remoteHost: [ + { + required: true, + message: '请输入远程地址', + }, + { + pattern: Validator.regIp || Validator.regDomain, + message: '请输入IP或者域名', + }, + ], + remotePort: [ + { + required: true, + message: '输入远程端口', + }, + { + pattern: Validator.regOnlyNumber, + message: '请输入1-65535之间的正整数', + }, + ], + clientId: [ + { + required: true, + message: '请输入ClientId', + }, + { + max: 64, + message: '最大可输入64个字符', + }, + ], + username: [ + { + required: true, + message: '请输入用户名', + }, + { + max: 64, + message: '最大可输入64个字符', + }, + ], + password: [ + { + required: true, + message: '请输入密码', + }, + { + max: 64, + message: '最大可输入64个字符', + }, + ], + topicPrefix: [ + { + max: 64, + message: '最大可输入64个字符', + }, + ], + maxMessageSize: [ + { + required: true, + message: '请输入最大消息长度', + }, + ], + secure: [ + { + required: true, + }, + ], + certId: [ + { + required: true, + message: '请选择证书', + }, + ], + privateKeyAlias: [ + { + required: true, + message: '请输入私钥别名', + }, + { + max: 64, + message: '最大可输入64个字符', + }, + ], + parserType: [ + { + required: true, + message: '请选择粘拆包规则', + }, + ], + delimited: [ + { + required: true, + message: '请输入分隔符', + }, + { + max: 64, + message: '最大可输入64个字符', + }, + ], + lang: [ + { + required: true, + message: '请选择脚本语言', + }, + { + max: 64, + message: '最大可输入64个字符', + }, + ], + script: [ + { + required: true, + message: '请输入脚本', + }, + ], + size: [ + { + required: true, + message: '请输入长度值', + }, + ], + length: [ + { + required: true, + message: '请选择长度', + }, + ], + offset: [ + { + pattern: Validator.regOnlyNumber, + message: '请输入0-65535之间的正整数', + }, + ], +}; + +export const TiTlePermissionButtonStyle = { + padding: 0, + color: ' #1890ff !important', + 'font-weight': 700, + 'font-size': '16px', + overflow: 'hidden', + 'text-overflow': 'ellipsis', + 'white-space': 'nowrap', + width: 'calc(100%-100px)', + // width: '60%', +}; diff --git a/src/views/DataCollect/Channel/index.vue b/src/views/DataCollect/Channel/index.vue new file mode 100644 index 00000000..9ec96770 --- /dev/null +++ b/src/views/DataCollect/Channel/index.vue @@ -0,0 +1,336 @@ + + + diff --git a/src/views/DataCollect/Channel/type.d.ts b/src/views/DataCollect/Channel/type.d.ts new file mode 100644 index 00000000..87664902 --- /dev/null +++ b/src/views/DataCollect/Channel/type.d.ts @@ -0,0 +1,38 @@ +export interface ConfigurationType { + parserType: string | undefined; + port: string | undefined; + host: string | undefined;; + publicPort: string; + publicHost: string; + remoteHost: string; + remotePort: string; + secure: boolean; + username: string; + password: string; + topicPrefix: string; + maxMessageSize: string | number; + certId: string | undefined; + privateKeyAlias: string; + clientId: string; + parserConfiguration: { + delimited: string; + lang: string; + script: string; + size: string; + length: string; + offset: string; + little: string | boolean | undefined; + }; +} + +export interface FormDataType { + name: string; + type: string; + shareCluster: boolean; + description: string; +} +export interface FormData2Type { + id?: number | string; + serverId?: string | undefined; + configuration: ConfigurationType; +} From dd1c05e0b8773c05e9a6fb8c5be8cc09b6704e01 Mon Sep 17 00:00:00 2001 From: jackhoo_98 Date: Fri, 3 Mar 2023 11:35:22 +0800 Subject: [PATCH 3/4] =?UTF-8?q?feat:=20post=E6=96=B9=E6=B3=95=E6=96=B0?= =?UTF-8?q?=E5=A2=9E=E6=89=A9=E5=B1=95=E5=8F=82=E6=95=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/utils/request.ts | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/src/utils/request.ts b/src/utils/request.ts index 9e43cb5b..5eaf3044 100644 --- a/src/utils/request.ts +++ b/src/utils/request.ts @@ -24,12 +24,17 @@ export const request = axios.create({ * @param {String} url * @param {Object} [data] * @param {String} responseType 如果接口是需要导出文件流，那么responseType = 'blob' + * @param {Object|String} [ext] 扩展参数，如果是配置headers，ext对象内包含headers对象，如下 + * { + headers: {'Content-Type': 'text/plain;charset=UTF-8'}, + } * @returns {AxiosInstance} */ -export const post = function(url: string, data = {}, params = {}) { - params = typeof params === 'string' ? { responseType: params } : params +export const post = function(url: string, data = {}, params = {}, ext={}) { + ext = typeof ext === 'string' ? { responseType: ext } : ext return request>({ - ...params, + ...ext, + params, method: 'POST', url, data From 349f066870d9bf65bc1b753a34133f3381ed555e Mon Sep 17 00:00:00 2001 From: jackhoo_98 Date: Sat, 4 Mar 2023 10:07:51 +0800 Subject: [PATCH 4/4] =?UTF-8?q?feat:=20=E9=80=9A=E9=81=93=E7=AE=A1?= =?UTF-8?q?=E7=90=86=20=E5=8D=A1=E7=89=87=E5=88=97=E8=A1=A8=E3=80=81?= =?UTF-8?q?=E6=96=B0=E5=A2=9E=E7=BC=96=E8=BE=91=E7=AD=89=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/data-collect/channel.ts | 27 +- .../DataCollect/Channel/Detail/index.vue | 1332 ----------------- src/views/DataCollect/Channel/Save/index.vue | 315 ++++ src/views/DataCollect/Channel/data.ts | 418 ++---- src/views/DataCollect/Channel/index.vue | 115 +- src/views/DataCollect/Channel/type.d.ts | 35 +- 6 files changed, 527 insertions(+), 1715 deletions(-) delete mode 100644 src/views/DataCollect/Channel/Detail/index.vue create mode 100644 src/views/DataCollect/Channel/Save/index.vue diff --git a/src/api/data-collect/channel.ts b/src/api/data-collect/channel.ts index 5c9a5312..08bbbd8c 100644 --- a/src/api/data-collect/channel.ts +++ b/src/api/data-collect/channel.ts @@ -1,10 +1,27 @@ import server from '@/utils/request'; -export const queryChannel = (type: string, data: any) => +export const query = (data: any) => server.post(`/data-collect/channel/_query`, data); -export const removeChannel = (type: string, data: any) => - server.remove(`/data-collect/channel//${id}`); +export const remove = (id: string) => + server.remove(`/data-collect/channel/${id}`); -export const updateChannel = (type: string, data: any) => - server.patch(`/data-collect/channel//${id}`, data); +export const save = (data: any) => server.post(`/data-collect/channel`, data); + +export const update = (id: string, data: any) => + server.put(`/data-collect/channel/${id}`, data); + +export const getProviders = () => server.get(`/gateway/device/providers`); + +export const queryOptionsList = (type: strimg) => + server.get(`/data-collect/opc/${type}`); + +export const validateField = (data: any) => + server.post(`/data-collect/opc/endpoint/_validate`, data, null, { + headers: { + 'Content-Type': 'text/plain;charset=UTF-8', + }, + }); + +export const queryCertificateList = () => + server.get(`/network/certificate/_query/no-paging?paging=false`, {}); diff --git a/src/views/DataCollect/Channel/Detail/index.vue b/src/views/DataCollect/Channel/Detail/index.vue deleted file mode 100644 index 48f32450..00000000 --- a/src/views/DataCollect/Channel/Detail/index.vue +++ /dev/null @@ -1,1332 +0,0 @@ - - - - - diff --git a/src/views/DataCollect/Channel/Save/index.vue b/src/views/DataCollect/Channel/Save/index.vue new file mode 100644 index 00000000..350091e2 --- /dev/null +++ b/src/views/DataCollect/Channel/Save/index.vue @@ -0,0 +1,315 @@ + + + + diff --git a/src/views/DataCollect/Channel/data.ts b/src/views/DataCollect/Channel/data.ts index 9bd25bd6..27c3d759 100644 --- a/src/views/DataCollect/Channel/data.ts +++ b/src/views/DataCollect/Channel/data.ts @@ -1,305 +1,39 @@ -export const Configuration = { - parserType: undefined, - port: undefined, - host: undefined, - publicPort: '', - publicHost: '', - remoteHost: '', - remotePort: '', - secure: false, - username: '', - password: '', - topicPrefix: '', - maxMessageSize: 8192, - certId: undefined, - privateKeyAlias: '', - clientId: '', - parserConfiguration: { - delimited: '', - lang: '', - script: '', - size: '', - length: '4', - offset: '0', - little: 'false', - }, -}; +import { validateField } from '@/api/data-collect/channel'; +import { FormDataType } from './type.d'; -export const FormStates = { +export const FormState: FormDataType = { name: '', - type: 'UDP', - shareCluster: true, + provider: undefined, + configuration: { + host: '', + port: '502', + endpoint: '', + securityPolicy: undefined, + securityMode: undefined, + certificate: undefined, + authType: undefined, + username: '', + password: '', + }, description: '', }; -export const FormStates2 = { - serverId: undefined, - configuration: Configuration, +export const StatusColorEnum = { + running: 'success', + disabled: 'error', + partialError: 'processing', + failed: 'warning', + stopped: 'default', }; - -export const TCPList = [ - 'TCP_SERVER', - 'WEB_SOCKET_SERVER', - 'HTTP_SERVER', - 'MQTT_SERVER', -]; -export const UDPList = ['UDP', 'COAP_SERVER']; - -const VisibleMost = [ - 'COAP_SERVER', - 'MQTT_SERVER', - 'WEB_SOCKET_SERVER', - 'TCP_SERVER', - 'UDP', - 'HTTP_SERVER', -]; - -export const VisibleData = { - parserType: ['TCP_SERVER'], - port: VisibleMost, - host: VisibleMost, - publicPort: VisibleMost, - publicHost: VisibleMost, - serverId: ['MQTT_CLIENT'], - remoteHost: ['MQTT_CLIENT'], - remotePort: ['MQTT_CLIENT'], - secure: ['TCP_SERVER', 'UDP', 'COAP_SERVER'], - username: ['MQTT_CLIENT'], - password: ['MQTT_CLIENT'], - topicPrefix: ['MQTT_CLIENT'], - maxMessageSize: ['MQTT_SERVER', 'MQTT_CLIENT'], - clientId: ['MQTT_CLIENT'], - delimited: ['DELIMITED'], - lang: ['SCRIPT'], - script: ['SCRIPT'], - size: ['FIXED_LENGTH'], - length: ['LENGTH_FIELD'], - offset: ['LENGTH_FIELD'], - little: ['LENGTH_FIELD'], -}; - -export const ParserTypeOptions = [ - { value: 'DIRECT', label: '不处理' }, - { value: 'DELIMITED', label: '分隔符' }, - { value: 'SCRIPT', label: '自定义脚本' }, - { value: 'FIXED_LENGTH', label: '固定长度' }, - { value: 'LENGTH_FIELD', label: '长度字段' }, -]; -export const LengthOptions = [ - { value: '1', label: '1' }, - { value: '2', label: '2' }, - { value: '3', label: '3' }, - { value: '4', label: '4' }, - { value: '8', label: '8' }, -]; -export const LittleOptions = [ - { label: '大端', value: 'false' }, - { label: '小端', value: 'true' }, -]; - -export const isVisible = ( - LastName: string, - dependencies: string | boolean | undefined, -) => VisibleData[LastName].includes(dependencies); - -export const Validator = { - regIp: new RegExp( - /((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})(\.((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})){3}/, - ), - regDomain: new RegExp( - /[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+\.?/, - ), - regOnlyNumber: new RegExp(/^\d+$/), -}; - -export const Rules = { - name: [ - { - required: true, - message: '请输入名称', - }, - { - max: 64, - message: '最大可输入64个字符', - }, - ], - type: [ - { - required: true, - message: '请选择类型', - }, - ], - shareCluster: [ - { - required: true, - message: '请选择集群', - }, - ], - host: [ - { - required: true, - message: '请选择本地地址', - }, - ], - port: [ - { - required: true, - message: '请选择本地端口', - }, - ], - publicHost: [ - { - required: true, - message: '请输入公网地址', - }, - { - pattern: Validator.regIp || Validator.regDomain, - message: '请输入IP或者域名', - }, - ], - publicPort: [ - { - required: true, - message: '请输入公网端口', - }, - { - pattern: Validator.regOnlyNumber, - message: '请输入1-65535之间的正整数', - }, - ], - remoteHost: [ - { - required: true, - message: '请输入远程地址', - }, - { - pattern: Validator.regIp || Validator.regDomain, - message: '请输入IP或者域名', - }, - ], - remotePort: [ - { - required: true, - message: '输入远程端口', - }, - { - pattern: Validator.regOnlyNumber, - message: '请输入1-65535之间的正整数', - }, - ], - clientId: [ - { - required: true, - message: '请输入ClientId', - }, - { - max: 64, - message: '最大可输入64个字符', - }, - ], - username: [ - { - required: true, - message: '请输入用户名', - }, - { - max: 64, - message: '最大可输入64个字符', - }, - ], - password: [ - { - required: true, - message: '请输入密码', - }, - { - max: 64, - message: '最大可输入64个字符', - }, - ], - topicPrefix: [ - { - max: 64, - message: '最大可输入64个字符', - }, - ], - maxMessageSize: [ - { - required: true, - message: '请输入最大消息长度', - }, - ], - secure: [ - { - required: true, - }, - ], - certId: [ - { - required: true, - message: '请选择证书', - }, - ], - privateKeyAlias: [ - { - required: true, - message: '请输入私钥别名', - }, - { - max: 64, - message: '最大可输入64个字符', - }, - ], - parserType: [ - { - required: true, - message: '请选择粘拆包规则', - }, - ], - delimited: [ - { - required: true, - message: '请输入分隔符', - }, - { - max: 64, - message: '最大可输入64个字符', - }, - ], - lang: [ - { - required: true, - message: '请选择脚本语言', - }, - { - max: 64, - message: '最大可输入64个字符', - }, - ], - script: [ - { - required: true, - message: '请输入脚本', - }, - ], - size: [ - { - required: true, - message: '请输入长度值', - }, - ], - length: [ - { - required: true, - message: '请选择长度', - }, - ], - offset: [ - { - pattern: Validator.regOnlyNumber, - message: '请输入0-65535之间的正整数', - }, - ], +export const updateStatus = { + disabled: { + state: 'enabled', + runningState: 'running', + }, + enabled: { + state: 'disabled', + runningState: 'stopped', + }, }; export const TiTlePermissionButtonStyle = { @@ -313,3 +47,95 @@ export const TiTlePermissionButtonStyle = { width: 'calc(100%-100px)', // width: '60%', }; + +export const regOnlyNumber = new RegExp(/^\d+$/); + +export const regIP = new RegExp( + /^([0-9]|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.([0-9]|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.([0-9]|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.([0-9]|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])$/, +); +export const regIPv6 = new RegExp( + /^\s*((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:)))(%.+)?\s*$/, +); +export const regDomain = new RegExp( + /([0-9a-z-]{2,}\.[0-9a-z-]{2,3}\.[0-9a-z-]{2,3}|[0-9a-z-]{2,}\.[0-9a-z-]{2,3})$/i, +); +export const checkEndpoint = (_rule: Rule, value: string): Promise => + new Promise(async (resolve, reject) => { + if (value) { + const res = await validateField(value); + return res.result.passed ? resolve('') : reject(res.result.reason); + } + }); +export const FormValidate = { + name: [ + { required: true, message: '请输入名称', trigger: 'blur' }, + { max: 64, message: '最多可输入64个字符' }, + ], + provider: [{ required: true, message: '请选择通讯协议' }], + host: [ + { + required: true, + message: '请输入Modbus主机IP', + }, + { + pattern: regIP || regIPv6 || regDomain, + message: '请输入正确格式的Modbus主机IP地址', + }, + ], + port: [ + { + required: true, + message: '请输入端口', + }, + { + pattern: regOnlyNumber, + message: '请输入1-65535之间的正整数', + }, + ], + + endpoint: [ + { + required: true, + message: '请输入端点url', + }, + { + validator: checkEndpoint, + trigger: 'blur', + }, + ], + + securityPolicy: [ + { + required: true, + message: '请选择安全策略', + }, + ], + securityMode: [ + { + required: true, + message: '请选择安全模式', + }, + ], + certificate: [ + { + required: true, + message: '请选择证书', + }, + ], + authType: [ + { + required: true, + message: '请选择权限认证', + }, + ], + username: [ + { required: true, message: '请输入用户名', trigger: 'blur' }, + { max: 64, message: '最多可输入64个字符' }, + ], + password: [ + { required: true, message: '请输入密码', trigger: 'blur' }, + { max: 64, message: '最多可输入64个字符' }, + ], + + description: [{ max: 200, message: '最多可输入200个字符' }], +}; diff --git a/src/views/DataCollect/Channel/index.vue b/src/views/DataCollect/Channel/index.vue index 9ec96770..5c6782e5 100644 --- a/src/views/DataCollect/Channel/index.vue +++ b/src/views/DataCollect/Channel/index.vue @@ -3,12 +3,12 @@
- - + +