diff --git a/src/api/data-collect/channel.ts b/src/api/data-collect/channel.ts
new file mode 100644
index 00000000..08bbbd8c
--- /dev/null
+++ b/src/api/data-collect/channel.ts
@@ -0,0 +1,27 @@
+import server from '@/utils/request';
+
+export const query = (data: any) =>
+ server.post(`/data-collect/channel/_query`, data);
+
+export const remove = (id: string) =>
+ server.remove(`/data-collect/channel/${id}`);
+
+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/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/components/Player/ScreenPlayer.vue b/src/components/Player/ScreenPlayer.vue
index d89f55f8..1e8e38f4 100644
--- a/src/components/Player/ScreenPlayer.vue
+++ b/src/components/Player/ScreenPlayer.vue
@@ -61,7 +61,10 @@
保存
-
+
刷新
-
+
@@ -179,20 +186,39 @@ const props = defineProps();
const DEFAULT_SAVE_CODE = 'screen-save';
+// 分屏数量 1/4/9/0
const screen = ref(1);
+// 视频窗口
const players = ref([]);
+// 当前选中的窗口
const playerActive = ref(0);
+// 单个播放窗口宽高
+const screenWidth = ref('');
+const screenHeight = ref('');
+// 历史记录
const historyList = ref([]);
+// 展示保存浮窗
const visible = ref(false);
const loading = ref(false);
-const fullscreenRef = ref(null);
-const { isFullscreen, enter, exit, toggle } = useFullscreen();
-
+// 保存表单
const formRef = ref();
const formData = ref({
name: '',
});
+// 全屏元素
+const fullscreenRef = ref(null);
+const { isFullscreen, enter, exit, toggle } = useFullscreen(
+ fullscreenRef.value,
+);
+
+/**
+ * 刷新视频
+ * @param id
+ * @param channelId
+ * @param url
+ * @param index
+ */
const reloadPlayer = (
id: string,
channelId: string,
@@ -221,6 +247,12 @@ const reloadPlayer = (
}, 1000);
};
+/**
+ * 视频链接变化, 更新播放内容
+ * @param id
+ * @param channelId
+ * @param url
+ */
const replaceVideo = (id: string, channelId: string, url: string) => {
const olPlayers = [...players.value];
const newPlayer = {
@@ -246,6 +278,10 @@ const replaceVideo = (id: string, channelId: string, url: string) => {
}
};
+/**
+ * 点击分屏历史记录
+ * @param item
+ */
const handleHistory = (item: any) => {
if (props.historyHandle) {
const log = JSON.parse(item.content || '{}');
@@ -271,12 +307,20 @@ const handleHistory = (item: any) => {
}
};
+/**
+ * 获取历史分屏
+ */
const getHistory = async () => {
const res = await getSearchHistory(DEFAULT_SAVE_CODE);
if (res.success) {
historyList.value = res.result;
}
};
+
+/**
+ * 删除历史分屏
+ * @param id
+ */
const deleteHistory = async (id: string) => {
const res = await deleteSearchHistory(DEFAULT_SAVE_CODE, id);
if (res.success) {
@@ -285,6 +329,9 @@ const deleteHistory = async (id: string) => {
}
};
+/**
+ * 保存分屏
+ */
const saveHistory = async () => {
formRef.value
.validate()
@@ -292,7 +339,7 @@ const saveHistory = async () => {
const param = {
name: formData.value.name,
content: JSON.stringify({
- screen: screen,
+ screen: screen.value,
players: players.value.map((item: any) => ({
deviceId: item.id,
channelId: item.channelId,
@@ -306,6 +353,7 @@ const saveHistory = async () => {
visible.value = false;
getHistory();
message.success('保存成功');
+ formRef.value.resetFields();
} else {
message.error('保存失败');
}
@@ -315,6 +363,9 @@ const saveHistory = async () => {
});
};
+/**
+ * 初始化
+ */
const mediaInit = () => {
const newArr = [];
for (let i = 0; i < 9; i++) {
@@ -329,6 +380,10 @@ const mediaInit = () => {
players.value = newArr;
};
+/**
+ * 改变分屏数量
+ * @param e
+ */
const handleScreenChange = (e: any) => {
if (e.target.value) {
screenChange(e.target.value);
@@ -348,8 +403,19 @@ const screenChange = (index: number) => {
}));
playerActive.value = 0;
screen.value = index;
+
+ // if (screen.value === 4) {
+ // screenWidth.value = '350px';
+ // screenHeight.value = '2000px';
+ // }
};
+/**
+ * 刷新
+ * @param e
+ * @param item
+ * @param index
+ */
const handleRefresh = (e: any, item: any, index: number) => {
e.stopPropagation();
if (item.url) {
@@ -363,10 +429,6 @@ const handleRefresh = (e: any, item: any, index: number) => {
*/
const handleMouseDown = (type: string) => {
const { id, channelId } = players.value[playerActive.value];
- console.log('players.value: ', players.value);
- console.log('playerActive.value: ', playerActive.value);
- console.log('id: ', id);
- console.log('channelId: ', channelId);
if (id && channelId && props.onMouseDown) {
props.onMouseDown(id, channelId, type);
}
@@ -393,6 +455,10 @@ watchEffect(() => {
}
mediaInit();
});
+
+defineExpose({
+ replaceVideo,
+});
diff --git a/src/views/DataCollect/Channel/data.ts b/src/views/DataCollect/Channel/data.ts
new file mode 100644
index 00000000..27c3d759
--- /dev/null
+++ b/src/views/DataCollect/Channel/data.ts
@@ -0,0 +1,141 @@
+import { validateField } from '@/api/data-collect/channel';
+import { FormDataType } from './type.d';
+
+export const FormState: FormDataType = {
+ name: '',
+ provider: undefined,
+ configuration: {
+ host: '',
+ port: '502',
+ endpoint: '',
+ securityPolicy: undefined,
+ securityMode: undefined,
+ certificate: undefined,
+ authType: undefined,
+ username: '',
+ password: '',
+ },
+ description: '',
+};
+
+export const StatusColorEnum = {
+ running: 'success',
+ disabled: 'error',
+ partialError: 'processing',
+ failed: 'warning',
+ stopped: 'default',
+};
+export const updateStatus = {
+ disabled: {
+ state: 'enabled',
+ runningState: 'running',
+ },
+ enabled: {
+ state: 'disabled',
+ runningState: 'stopped',
+ },
+};
+
+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%',
+};
+
+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
new file mode 100644
index 00000000..5c6782e5
--- /dev/null
+++ b/src/views/DataCollect/Channel/index.vue
@@ -0,0 +1,341 @@
+
+
+
+
+
+
+
+
+
+ 新增通道
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ slotProps.name }}
+
+
+
+
+
+ 协议
+
+
+
+ {{
+ slotProps.provider
+ }}
+ {{ slotProps.provider }}
+
+
+
+
+
+ 地址
+
+
+
+ {{
+ slotProps.configuration
+ .host ||
+ slotProps.configuration
+ .endpoint
+ }}
+ {{
+ slotProps.configuration
+ .host ||
+ slotProps.configuration
+ .endpoint
+ }}
+
+
+
+
+
+
+
+
+
+
+
+ {{ item?.text }}
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/views/DataCollect/Channel/type.d.ts b/src/views/DataCollect/Channel/type.d.ts
new file mode 100644
index 00000000..f4270317
--- /dev/null
+++ b/src/views/DataCollect/Channel/type.d.ts
@@ -0,0 +1,19 @@
+export interface ConfigurationType {
+ port: string | undefined;
+ host: string | undefined;;
+ username: string;
+ password: string;
+ endpoint: string,
+ securityPolicy: string | undefined,
+ securityMode: string | undefined,
+ certificate: string | undefined,
+ authType: string | undefined,
+
+}
+
+export interface FormDataType {
+ name: string;
+ provider: string | undefined,
+ configuration: ConfigurationType;
+ description?: string;
+}
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 @@
+
+
+
+
+
+
{{ title }}
+
+
+ {{ tooltip }}
+
+
+
+
+
{{ value }}
+
+
+
![]()
+
+
+
+
+
+
+
+
+
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;
-}
diff --git a/src/views/media/SplitScreen/index.less b/src/views/media/SplitScreen/index.less
index f09f26c3..205df4ae 100644
--- a/src/views/media/SplitScreen/index.less
+++ b/src/views/media/SplitScreen/index.less
@@ -10,10 +10,16 @@
.online {
color: rgba(82, 196, 26, 1);
+ .anticon {
+ color: rgba(82, 196, 26, 1);
+ }
}
.offline {
color: rgba(0, 0, 0, 0.25);
+ .anticon {
+ color: rgba(0, 0, 0, 0.25);
+ }
}
.left-search {
diff --git a/src/views/media/SplitScreen/index.vue b/src/views/media/SplitScreen/index.vue
index 0c27f885..16a2d15c 100644
--- a/src/views/media/SplitScreen/index.vue
+++ b/src/views/media/SplitScreen/index.vue
@@ -30,10 +30,19 @@ const deviceId = ref('');
const channelId = ref('');
const player = ref();
+/**
+ * 获取视频链接
+ * @param dId
+ * @param cId
+ */
const getMediaUrl = (dId: string, cId: string): string => {
return channelApi.ptzStart(dId, cId, 'mp4');
};
+/**
+ * 点击左侧摄像头, 播放对应视频
+ * @param e
+ */
const mediaStart = (e: { cId: string; dId: string }) => {
channelId.value = e.cId;
deviceId.value = e.dId;
diff --git a/src/views/media/SplitScreen/tree.vue b/src/views/media/SplitScreen/tree.vue
index ddddb178..79d84e52 100644
--- a/src/views/media/SplitScreen/tree.vue
+++ b/src/views/media/SplitScreen/tree.vue
@@ -12,7 +12,6 @@
@@ -42,8 +41,12 @@ interface DataNode {
children?: DataNode[];
}
+/**
+ * 点击节点
+ * @param _
+ * @param param1
+ */
const onSelect = (_: any, { node }: any) => {
- console.log('node: ', node);
emit('onSelect', { dId: node.deviceId, cId: node.channelId });
};
@@ -77,6 +80,12 @@ const getDeviceList = async () => {
};
getDeviceList();
+/**
+ * 更新数据
+ * @param list
+ * @param key
+ * @param children
+ */
const updateTreeData = (
list: DataNode[],
key: any,
@@ -117,9 +126,7 @@ const getChildren = (key: any, params: any): Promise => {
key,
res.result.data.map((item: DataNode) => ({
...item,
- // icon: (),
- // icon: ``,
- // icon: (h:any) => h('h1', 22),
+ class: item.status.value,
isLeaf: isLeaf(item),
})),
);
@@ -132,13 +139,15 @@ const getChildren = (key: any, params: any): Promise => {
});
}, 50);
}
- console.log('treeData.value: ', treeData.value);
- console.log('res.result: ', res.result);
resolve(res.result);
}
});
};
+/**
+ * 异步加载子节点数据
+ * @param param0
+ */
const onLoadData = ({ key, children }: any): Promise => {
return new Promise(async (resolve) => {
if (children) {
diff --git a/yarn.lock b/yarn.lock
index 4fad3a08..e15c1d65 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3903,8 +3903,8 @@ jetlinks-store@^0.0.3:
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==
+ resolved "https://registry.jetlinks.cn/jetlinks-ui-components/-/jetlinks-ui-components-1.0.3.tgz#303ca83cf6096721e49e72d1a3a73b054b0aa7fa"
+ integrity sha512-Jm7tP/CtnK2GIRSPTjd/UOw8emZ3C7/i9af8m+XCM8wi/J1SZh4cZGc487vR1DPxyWZfJjG87Zdy45DZ5EMw2w==
dependencies:
"@vueuse/core" "^9.12.0"
ant-design-vue "^3.2.15"