From 8bef5114fa98b3579fb5c4396ad309a70cf61dec Mon Sep 17 00:00:00 2001 From: jackhoo_98 Date: Thu, 2 Mar 2023 15:46:43 +0800 Subject: [PATCH 01/16] =?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 02/16] =?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 03/16] =?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 9e84a7bb8caddf3dc4c5bbf3c11fd53c48c1a1a8 Mon Sep 17 00:00:00 2001 From: easy <1358086367@qq.com> Date: Fri, 3 Mar 2023 14:47:10 +0800 Subject: [PATCH 04/16] =?UTF-8?q?update:=20=E5=8F=88=E4=B8=8A=E8=A7=92?= =?UTF-8?q?=E9=93=83=E9=93=9B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Layout/components/Notice.vue | 26 ++++++++- .../Layout/components/NoticeInfo.vue | 57 ++++++++++++++++++- src/components/Layout/components/nodata.svg | 36 ++++++++++++ 3 files changed, 113 insertions(+), 6 deletions(-) create mode 100644 src/components/Layout/components/nodata.svg diff --git a/src/components/Layout/components/Notice.vue b/src/components/Layout/components/Notice.vue index 2ed7f639..c65d275f 100644 --- a/src/components/Layout/components/Notice.vue +++ b/src/components/Layout/components/Notice.vue @@ -5,8 +5,8 @@ @@ -16,16 +16,36 @@ diff --git a/src/components/Layout/components/NoticeInfo.vue b/src/components/Layout/components/NoticeInfo.vue index dd1e0aa7..d9257652 100644 --- a/src/components/Layout/components/NoticeInfo.vue +++ b/src/components/Layout/components/NoticeInfo.vue @@ -1,12 +1,43 @@ - + diff --git a/src/components/Layout/components/nodata.svg b/src/components/Layout/components/nodata.svg new file mode 100644 index 00000000..4fb16097 --- /dev/null +++ b/src/components/Layout/components/nodata.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + From 5b6e0611c4ea36447db50680ba012fd6e4ef5f09 Mon Sep 17 00:00:00 2001 From: JiangQiming <291854119@qq.com> Date: Fri, 3 Mar 2023 15:36:39 +0800 Subject: [PATCH 05/16] =?UTF-8?q?feat:=20=E5=88=86=E5=B1=8F=E5=B1=95?= =?UTF-8?q?=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/media/cascade.ts | 8 +- src/components/Player/ScreenPlayer.vue | 400 +++++++++++++++++++++++++ src/components/Player/index.less | 82 +++++ src/components/Player/index.vue | 4 +- src/views/media/SplitScreen/index.less | 85 ++++++ src/views/media/SplitScreen/index.vue | 46 +++ src/views/media/SplitScreen/tree.vue | 149 +++++++++ 7 files changed, 770 insertions(+), 4 deletions(-) create mode 100644 src/components/Player/ScreenPlayer.vue create mode 100644 src/components/Player/index.less create mode 100644 src/views/media/SplitScreen/index.less create mode 100644 src/views/media/SplitScreen/index.vue create mode 100644 src/views/media/SplitScreen/tree.vue diff --git a/src/api/media/cascade.ts b/src/api/media/cascade.ts index c8ba0a56..9881f689 100644 --- a/src/api/media/cascade.ts +++ b/src/api/media/cascade.ts @@ -35,8 +35,12 @@ export default { // 更改国标ID updateGbChannelId: (id: string, data: any): any => server.put(`/media/gb28181-cascade/binding/${id}`, data), // 查询通道分页列表 - queryChannelList: (data: any): any => server.post(`media/channel/_query`, data), + queryChannelList: (data: any): any => server.post(`/media/channel/_query`, data), // 推送 - publish: (id: string, params: any) => server.get(`/media/gb28181-cascade/${id}/bindings/publish`, params) + publish: (id: string, params: any) => server.get(`/media/gb28181-cascade/${id}/bindings/publish`, params), + + // 分屏展示接口 + // 设备树 + getMediaTree: (data?: any) => server.post(`/media/device/_query/no-paging`, data), } \ No newline at end of file diff --git a/src/components/Player/ScreenPlayer.vue b/src/components/Player/ScreenPlayer.vue new file mode 100644 index 00000000..d89f55f8 --- /dev/null +++ b/src/components/Player/ScreenPlayer.vue @@ -0,0 +1,400 @@ + + + + + + diff --git a/src/components/Player/index.less b/src/components/Player/index.less new file mode 100644 index 00000000..b199fe65 --- /dev/null +++ b/src/components/Player/index.less @@ -0,0 +1,82 @@ +.live-player-warp { + display: flex; + + .live-player-content { + display: flex; + flex: 1; + flex-direction: column; + + .player-screen-tool { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 20px; + + .ant-radio-button-wrapper { + height: auto; + padding: 4px 20px; + } + } + + .player-body { + flex: 1; + + .player-screen { + position: relative; + display: grid; + box-sizing: border-box; + + &.screen-1 { + grid-template-columns: 1fr; + } + + &.screen-4 { + grid-template-rows: 1fr 1fr; + grid-template-columns: 1fr 1fr; + } + + &.screen-9 { + grid-template-rows: 1fr 1fr 1fr; + grid-template-columns: 1fr 1fr 1fr; + } + + &.screen-4, + &.screen-9 { + grid-gap: 12px; + } + + .active { + border: 2px solid red; + } + + .full-screen { + border: 1px solid #fff; + } + + .player-screen-item { + position: relative; + + .media-btn-refresh { + position: absolute; + top: 4px; + right: 4px; + z-index: 2; + padding: 2px 4px; + font-size: 12px; + background-color: #f0f0f0; + border-radius: 2px; + cursor: pointer; + + &:hover { + background-color: #d9d9d9; + } + + &:active { + background-color: #bfbfbf; + } + } + } + } + } + } +} diff --git a/src/components/Player/index.vue b/src/components/Player/index.vue index 1eff1f56..ef5d2bcf 100644 --- a/src/components/Player/index.vue +++ b/src/components/Player/index.vue @@ -10,6 +10,8 @@ import vue3videoPlay from 'vue3-video-play'; const props = defineProps({ src: { type: String, default: '' }, type: { type: String, default: 'mp4' }, + width: { type: String, default: '500px' }, + height: { type: String, default: '280px' }, }); watch( @@ -21,8 +23,6 @@ watch( const options = reactive({ ...props, - width: '500px', //播放器高度 - height: '280px', //播放器高度 color: '#409eff', //主题色 title: '', //视频名称 // src: props.src, diff --git a/src/views/media/SplitScreen/index.less b/src/views/media/SplitScreen/index.less new file mode 100644 index 00000000..7f47662e --- /dev/null +++ b/src/views/media/SplitScreen/index.less @@ -0,0 +1,85 @@ +@padding: 20px; + +.split-screen { + display: flex; + + .left-content { + width: 300px; + padding-right: @padding; + border-right: 1px solid #f0f0f0; + + .online { + // color: @success-color; + } + + .offline { + // color: @disabled-color; + } + + .left-search { + margin-bottom: 12px; + } + } + + .right-content { + display: flex; + flex-direction: column; + flex-grow: 1; + padding-left: @padding; + + .top { + display: flex; + flex-basis: 30px; + justify-content: center; + padding-bottom: 12px; + } + + .live-player { + display: flex; + flex: 1; + + .live-player-content { + position: relative; + flex-grow: 1; + + .player-screen { + display: grid; + + &.screen-1 { + grid-template-columns: 1fr; + } + + &.screen-4 { + grid-template-rows: 1fr 1fr; + grid-template-columns: 1fr 1fr; + } + + &.screen-9 { + grid-template-rows: 1fr 1fr 1fr; + grid-template-columns: 1fr 1fr 1fr; + } + + &.screen-4, + &.screen-9 { + grid-gap: 12px; + } + } + } + + .player-tools { + flex-basis: 280px; + padding: 50px 12px 0 12px; + } + } + } +} + +@media screen { + @media (min-width: 1300px) { + .split-screen { + .left-content { + width: 200px; + } + } + } +} diff --git a/src/views/media/SplitScreen/index.vue b/src/views/media/SplitScreen/index.vue new file mode 100644 index 00000000..0c27f885 --- /dev/null +++ b/src/views/media/SplitScreen/index.vue @@ -0,0 +1,46 @@ + + + + + diff --git a/src/views/media/SplitScreen/tree.vue b/src/views/media/SplitScreen/tree.vue new file mode 100644 index 00000000..8bf489f9 --- /dev/null +++ b/src/views/media/SplitScreen/tree.vue @@ -0,0 +1,149 @@ + + + + + From 37a4845f8b246bfa3ccc30f6c779253158a0871e Mon Sep 17 00:00:00 2001 From: xieyonghong <18010623010@163.com> Date: Fri, 3 Mar 2023 15:47:32 +0800 Subject: [PATCH 06/16] =?UTF-8?q?update:=20=E6=9B=B4=E6=96=B0jetlinks-ui-c?= =?UTF-8?q?omponents=E7=89=88=E6=9C=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 +- yarn.lock | 43 +++++++++++++++++++++++++++++++++++++------ 2 files changed, 38 insertions(+), 7 deletions(-) diff --git a/package.json b/package.json index 387d6753..c3cc14ad 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,7 @@ "event-source-polyfill": "^1.0.31", "global": "^4.4.0", "jetlinks-store": "^0.0.3", - "jetlinks-ui-components": "^1.0.1", + "jetlinks-ui-components": "^1.0.3", "js-cookie": "^3.0.1", "less": "^4.1.3", "less-loader": "^11.1.0", diff --git a/yarn.lock b/yarn.lock index a0311d69..4fad3a08 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2146,7 +2146,7 @@ cli-width@^3.0.0: resolved "https://registry.npmmirror.com/cli-width/-/cli-width-3.0.0.tgz" integrity sha512-FxqpkPPwu1HjuN93Omfm4h8uIanXofW0RxVEW3k5RKx+mJJYSthzNhp32Kzxxy3YAEZ/Dc/EWN1vZRY0+kOhbw== -clipboard@^2.0.4: +clipboard@^2.0.10, clipboard@^2.0.4: version "2.0.11" resolved "https://registry.jetlinks.cn/clipboard/-/clipboard-2.0.11.tgz" integrity sha512-C+0bbOqkezLIsmWSvlsXS0Q0bmkugu7jcfMIACB+RDEntIzQIkdr148we28AfSloQLRdZlYL/QYyrq05j/3Faw== @@ -3416,6 +3416,11 @@ highlight.js@^11.3.1: resolved "https://registry.npmmirror.com/highlight.js/-/highlight.js-11.7.0.tgz" integrity sha512-1rRqesRFhMO/PRF+G86evnyJkCgaZFOI+Z6kdj15TA18funfoqJXvgPCLSf0SWq3SRfg1j3HlDs8o4s3EGq1oQ== +hls.js@^1.0.10: + version "1.3.4" + resolved "https://registry.jetlinks.cn/hls.js/-/hls.js-1.3.4.tgz#8212a3f95c3321f64a586f20e67876f3a9d09488" + integrity sha512-iFEwVqtEDk6sKotcTwtJ5OMo/nuDTk9PrpB8FI2J2WYf8EriTVfR4FaK0aNyYtwbYeRSWCXJKlz23xeREdlNYg== + homedir-polyfill@^1.0.0: version "1.0.3" resolved "https://registry.npmmirror.com/homedir-polyfill/-/homedir-polyfill-1.0.3.tgz" @@ -3896,10 +3901,10 @@ jetlinks-store@^0.0.3: resolved "https://registry.npmjs.org/jetlinks-store/-/jetlinks-store-0.0.3.tgz" integrity sha512-AZf/soh1hmmwjBZ00fr1emuMEydeReaI6IBTGByQYhTmK1Zd5pQAxC7WLek2snRAn/HHDgJfVz2hjditKThl6Q== -jetlinks-ui-components@^1.0.2: - version "1.0.2" - resolved "https://registry.jetlinks.cn/jetlinks-ui-components/-/jetlinks-ui-components-1.0.2.tgz#753507e4a84dee966c65d4ae33943507bd60cc9d" - integrity sha512-LXKetf75/uqzWP4XOobm+iUWTVEeMJNnwEk+GrNftQdcDzGvUxBaoFCoS+HBH06FnE2VBbh6rEwrpDhkLSNEow== +jetlinks-ui-components@^1.0.3: + version "1.0.3" + resolved "https://registry.jetlinks.cn/jetlinks-ui-components/-/jetlinks-ui-components-1.0.3.tgz#08a35ebfa016574affcfd11204359cdccf8e139f" + integrity sha512-kA/AxzdfNy+Sl8En8raMwIh3stofgElkUuJ+oRJMpQVTGbrOk29DifRsHJJFNvtEvclmLdKZkOkthOuEdG2mnw== dependencies: "@vueuse/core" "^9.12.0" ant-design-vue "^3.2.15" @@ -6554,6 +6559,11 @@ three@0.143.0: resolved "https://registry.npmjs.org/three/-/three-0.143.0.tgz" integrity sha512-oKcAGYHhJ46TGEuHjodo2n6TY2R6lbvrkp+feKZxqsUL/WkH7GKKaeu6RHeyb2Xjfk2dPLRKLsOP0KM2VgT8Zg== +throttle-debounce@^3.0.1: + version "3.0.1" + resolved "https://registry.jetlinks.cn/throttle-debounce/-/throttle-debounce-3.0.1.tgz#32f94d84dfa894f786c9a1f290e7a645b6a19abb" + integrity sha512-dTEWWNu6JmeVXY0ZYoPuH5cRIwc0MeGbJwah9KUNYSJwommQpCzTySTpEe8Gs1J23aeWEuAobe4Ag7EHVt/LOg== + through2@^4.0.0: version "4.0.2" resolved "https://registry.npmmirror.com/through2/-/through2-4.0.2.tgz" @@ -6940,6 +6950,11 @@ uuid@^3.3.2: resolved "https://registry.jetlinks.cn/uuid/-/uuid-3.4.0.tgz" integrity sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A== +v-clipboard3@^0.1.4: + version "0.1.4" + resolved "https://registry.jetlinks.cn/v-clipboard3/-/v-clipboard3-0.1.4.tgz#13bdd12ce9728190d70f6ebf8b71de59d88b550e" + integrity sha512-iGIXgluf2WLbT+/Z1de9kKzoK9c9aPpy+zcPlY8/fneO+NHK95QEmFx2Q9LoxeUPRemD+nOfEv1J20Ki7W0v7Q== + v8-compile-cache-lib@^3.0.1: version "3.0.1" resolved "https://registry.npmmirror.com/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz" @@ -7072,6 +7087,13 @@ vue-types@^3.0.0: dependencies: is-plain-object "3.0.1" +vue3-json-viewer@^2.2.2: + version "2.2.2" + resolved "https://registry.jetlinks.cn/vue3-json-viewer/-/vue3-json-viewer-2.2.2.tgz#43a512f378c602bb6b7f2a72adeaf7d15b443885" + integrity sha512-56l3XDGggnpwEqZieXsSMhNT4NhtO6d7zuSAxHo4i0UVxymyY2jRb7UMQOU1ztChKALZCAzX7DlgrsnEhxu77A== + dependencies: + clipboard "^2.0.10" + vue3-markdown-it@^1.0.10: version "1.0.10" resolved "https://registry.npmmirror.com/vue3-markdown-it/-/vue3-markdown-it-1.0.10.tgz" @@ -7099,7 +7121,16 @@ vue3-ts-jsoneditor@^2.7.1: vanilla-jsoneditor "^0.7.9" vue "^3.2.37" -vue@^3.2.25: +vue3-video-play@^1.3.1-beta.6: + version "1.3.1-beta.6" + resolved "https://registry.jetlinks.cn/vue3-video-play/-/vue3-video-play-1.3.1-beta.6.tgz#bca3f55a11053eaa37053835e4610c04d9cc509e" + integrity sha512-Olrx2/LNAds7fuor/yX9ZKT9sOcwcfTt2g2YbbCrEaAmZ5Tb0hwBr5z+/CoLwELzzRzXCHPmWWoT0Wm5W/Nwpw== + dependencies: + hls.js "^1.0.10" + throttle-debounce "^3.0.1" + vue "^3.2.2" + +vue@^3.2.2, vue@^3.2.25: version "3.2.47" resolved "https://registry.jetlinks.cn/vue/-/vue-3.2.47.tgz#3eb736cbc606fc87038dbba6a154707c8a34cff0" integrity sha512-60188y/9Dc9WVrAZeUVSDxRQOZ+z+y5nO2ts9jWXSTkMvayiWxCWOWtBQoYjLeccfXkiiPZWAHcV+WTPhkqJHQ== From 9649dd9cbd6cb739bb3d95ca2bd7ffa7adacc96b Mon Sep 17 00:00:00 2001 From: JiangQiming <291854119@qq.com> Date: Fri, 3 Mar 2023 18:11:53 +0800 Subject: [PATCH 07/16] =?UTF-8?q?update:=20=E5=88=86=E5=B1=8F=E5=B1=95?= =?UTF-8?q?=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/media/SplitScreen/index.less | 4 ++-- src/views/media/SplitScreen/tree.vue | 18 +++++++++++++++--- 2 files changed, 17 insertions(+), 5 deletions(-) diff --git a/src/views/media/SplitScreen/index.less b/src/views/media/SplitScreen/index.less index 7f47662e..f09f26c3 100644 --- a/src/views/media/SplitScreen/index.less +++ b/src/views/media/SplitScreen/index.less @@ -9,11 +9,11 @@ border-right: 1px solid #f0f0f0; .online { - // color: @success-color; + color: rgba(82, 196, 26, 1); } .offline { - // color: @disabled-color; + color: rgba(0, 0, 0, 0.25); } .left-search { diff --git a/src/views/media/SplitScreen/tree.vue b/src/views/media/SplitScreen/tree.vue index 8bf489f9..2b1eceb2 100644 --- a/src/views/media/SplitScreen/tree.vue +++ b/src/views/media/SplitScreen/tree.vue @@ -2,12 +2,17 @@
+ > + +
@@ -34,6 +39,7 @@ interface DataNode { } const onSelect = (_: any, { node }: any) => { + console.log('node: ', node); emit('onSelect', { dId: node.deviceId, cId: node.channelId }); }; @@ -108,6 +114,8 @@ const getChildren = (key: any, params: any): Promise => { res.result.data.map((item: DataNode) => ({ ...item, // icon: (), + // icon: ``, + // icon: (h:any) => h('h1', 22), isLeaf: isLeaf(item), })), ); @@ -120,6 +128,8 @@ const getChildren = (key: any, params: any): Promise => { }); }, 50); } + console.log('treeData.value: ', treeData.value); + console.log('res.result: ', res.result); resolve(res.result); } }); @@ -146,4 +156,6 @@ const onLoadData = ({ key, children }: any): Promise => { }; - + From fab790bbe64a404d3d9e2b75ed8e8b3bc749d20c Mon Sep 17 00:00:00 2001 From: easy <1358086367@qq.com> Date: Fri, 3 Mar 2023 18:17:06 +0800 Subject: [PATCH 08/16] =?UTF-8?q?update:=20=E5=8F=B3=E4=B8=8A=E8=A7=92?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/AIcon/index.tsx | 4 + src/components/Layout/components/Notice.vue | 62 +++++++-- .../Layout/components/NoticeInfo.vue | 119 ++++++++++++------ src/components/Layout/components/UserInfo.vue | 12 +- src/store/userInfo.ts | 5 + .../account/NotificationRecord/index.vue | 22 ++-- yarn.lock | 43 ++++++- 7 files changed, 199 insertions(+), 68 deletions(-) diff --git a/src/components/AIcon/index.tsx b/src/components/AIcon/index.tsx index 6f2e9734..dd5e389f 100644 --- a/src/components/AIcon/index.tsx +++ b/src/components/AIcon/index.tsx @@ -70,6 +70,10 @@ const iconKeys = [ 'CaretDownOutlined', 'MinusOutlined', 'AudioOutlined', + 'BellOutlined', + 'UserOutlined', + 'LogoutOutlined', + 'ReadIconOutlined' ] const Icon = (props: {type: string}) => { diff --git a/src/components/Layout/components/Notice.vue b/src/components/Layout/components/Notice.vue index c65d275f..509c502a 100644 --- a/src/components/Layout/components/Notice.vue +++ b/src/components/Layout/components/Notice.vue @@ -1,8 +1,13 @@