视频监控视频分布按钮添加
This commit is contained in:
扈兆增
parent
6e5dc9188d
commit
d972a42f96
@ -108,9 +108,11 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="record-info">
|
||||
<div class="record-name">{{ item.name }}</div>
|
||||
<div class="record-name">
|
||||
{{ item.name || item.titleName || item.stnm }}
|
||||
</div>
|
||||
<div class="record-time">
|
||||
{{ dayjs(item.time).format('YYYY-MM-DD HH') }}
|
||||
{{ dayjs(item.time || item.tm).format('YYYY-MM-DD HH') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -351,7 +353,7 @@ const handlePlayRecord = (record: any) => {
|
||||
const videoData = {
|
||||
flnm: record.name,
|
||||
stnm: record.name,
|
||||
url: record.url,
|
||||
url: record.url || record.flpth,
|
||||
key: record.id,
|
||||
...record
|
||||
};
|
||||
|
||||
@ -96,6 +96,11 @@
|
||||
v-for="item in anchorPointOptions"
|
||||
:key="item.stcd"
|
||||
:value="item.stcd"
|
||||
:title="
|
||||
[item.stnm || item.ennm, item.baseName]
|
||||
.filter(Boolean)
|
||||
.join(',')
|
||||
"
|
||||
>{{ item.stnm || item.ennm }}
|
||||
{{
|
||||
item.baseName ? ',' + item.baseName : ''
|
||||
|
||||
@ -1,5 +1,8 @@
|
||||
<template>
|
||||
<div class="shiPinJianKongZhuanTi-page">
|
||||
<div
|
||||
class="shiPinJianKongZhuanTi-page"
|
||||
:class="{ 'shiPinJianKongZhuanTi-page-distribution': isDistribution }"
|
||||
>
|
||||
<a-tabs
|
||||
v-model:activeKey="activeTab"
|
||||
:tabBarGutter="32"
|
||||
@ -8,21 +11,34 @@
|
||||
>
|
||||
<template #rightExtra>
|
||||
<a-button type="default" class="mr-2" @click="handleAction">
|
||||
<template #icon><i class="iconfont icon-fenbu mr-1" /></template>
|
||||
查看分布
|
||||
<template #icon
|
||||
><i
|
||||
class="iconfont mr-1"
|
||||
:class="!isDistribution ? 'icon-fenbu' : 'icon-left1'"
|
||||
/></template>
|
||||
{{ !isDistribution ? '视频分布' : '取消' }}
|
||||
</a-button>
|
||||
</template>
|
||||
|
||||
<a-tab-pane v-for="tab in tabs" :key="tab.key">
|
||||
<template #tab> {{ tab.title }}({{ tab.data?.count_sttpCode || 0 }}) </template>
|
||||
<template #tab>
|
||||
{{ tab.title }}({{ tab.data?.count_sttpCode || 0 }})
|
||||
</template>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
|
||||
<div class="tabs-content">
|
||||
<JidiSelectorMod
|
||||
class="shiPinJianKongZhuanTi-JidiSelectorMod"
|
||||
v-if="isDistribution"
|
||||
/>
|
||||
|
||||
<div class="tabs-content" v-show="!isDistribution">
|
||||
<!-- 顶部标题和图标选择区域 -->
|
||||
<div class="content-header">
|
||||
<div class="header-left">
|
||||
<span class="title"> <a-divider type="vertical"></a-divider> 监控列表</span>
|
||||
<span class="title">
|
||||
<a-divider type="vertical"></a-divider> 监控列表</span
|
||||
>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<a-radio-group v-model:value="viewLayout" button-style="solid">
|
||||
@ -104,7 +120,11 @@
|
||||
v-model:expandedKeys="expandedKeys"
|
||||
v-model:checkedKeys="checkedKeys"
|
||||
:tree-data="treeData"
|
||||
:field-names="{ name: 'name', key: 'key', children: 'children' }"
|
||||
:field-names="{
|
||||
name: 'name',
|
||||
key: 'key',
|
||||
children: 'children'
|
||||
}"
|
||||
checkable
|
||||
block-node
|
||||
:show-icon="monitorType === 'live'"
|
||||
@ -115,7 +135,8 @@
|
||||
<!-- 只在实时视频模式且最后一层（没有children）显示在线/离线图标 -->
|
||||
<template
|
||||
v-if="
|
||||
monitorType === 'live' && (!children || children.length === 0)
|
||||
monitorType === 'live' &&
|
||||
(!children || children.length === 0)
|
||||
"
|
||||
>
|
||||
<i
|
||||
@ -138,12 +159,16 @@
|
||||
<!-- 中间视频内容区域 -->
|
||||
<div class="center-panel">
|
||||
<div class="video-grid" :class="`layout-${viewLayout}`">
|
||||
<div v-for="index in parseInt(viewLayout)" :key="index" class="video-item">
|
||||
<div
|
||||
v-for="index in parseInt(viewLayout)"
|
||||
:key="index"
|
||||
class="video-item"
|
||||
>
|
||||
<LiveVideoBox
|
||||
:video-data="videoList[index - 1]"
|
||||
:monitor-type="monitorType"
|
||||
height="100%"
|
||||
@close="(nodeKey) => removeVideo(index - 1, nodeKey)"
|
||||
@close="nodeKey => removeVideo(index - 1, nodeKey)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -152,7 +177,9 @@
|
||||
<!-- 右侧回放面板（仅录像模式显示） -->
|
||||
<div v-if="monitorType === 'record'" class="right-panel">
|
||||
<div class="replay-header">
|
||||
<span class="replay-title"><a-divider type="vertical" />回放列表</span>
|
||||
<span class="replay-title"
|
||||
><a-divider type="vertical" />回放列表</span
|
||||
>
|
||||
</div>
|
||||
<!-- 时间选择 -->
|
||||
<div class="date-picker">
|
||||
@ -168,7 +195,10 @@
|
||||
<div class="record-list">
|
||||
<a-spin :spinning="recordLoading" wrapperClassName="record-spin">
|
||||
<!-- 空状态显示 -->
|
||||
<div v-if="!recordList || recordList.length === 0" class="empty-record">
|
||||
<div
|
||||
v-if="!recordList || recordList.length === 0"
|
||||
class="empty-record"
|
||||
>
|
||||
<a-empty />
|
||||
</div>
|
||||
|
||||
@ -183,16 +213,18 @@
|
||||
<div class="record-image-wrapper">
|
||||
<a-image :src="item.imgPath" :preview="false" alt="" />
|
||||
</div>
|
||||
<div class="sp_btn"><i class="icon iconfont icon-play"></i></div>
|
||||
<div class="sp_btn">
|
||||
<i class="icon iconfont icon-play"></i>
|
||||
</div>
|
||||
<a-tooltip placement="top">
|
||||
<template #title>
|
||||
<div>{{ item.name }}</div>
|
||||
<div>{{ dayjs(item.time).format("YYYY-MM-DD HH") }}</div>
|
||||
<div>{{ dayjs(item.time).format('YYYY-MM-DD HH') }}</div>
|
||||
</template>
|
||||
<div class="record-info">
|
||||
<div class="record-name">{{ item.name }}</div>
|
||||
<div class="record-time">
|
||||
{{ dayjs(item.time).format("YYYY-MM-DD HH") }}
|
||||
{{ dayjs(item.time).format('YYYY-MM-DD HH') }}
|
||||
</div>
|
||||
</div>
|
||||
</a-tooltip>
|
||||
@ -207,40 +239,53 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted, watch } from "vue";
|
||||
import { message } from "ant-design-vue";
|
||||
import { ref, onMounted, onUnmounted, watch } from 'vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
import {
|
||||
baseMsstbprpt,
|
||||
envVdTreeGetKendoListCust,
|
||||
envVdRunDataGetKendoList,
|
||||
} from "@/api/shiPinJianKong";
|
||||
import type { Dayjs } from "dayjs";
|
||||
import dayjs from "dayjs";
|
||||
import { DateSetting } from "@/utils/enumeration";
|
||||
import LiveVideoBox from "./components/LiveVideoBox.vue";
|
||||
envVdRunDataGetKendoList
|
||||
} from '@/api/shiPinJianKong';
|
||||
import type { Dayjs } from 'dayjs';
|
||||
import dayjs from 'dayjs';
|
||||
import { DateSetting } from '@/utils/enumeration';
|
||||
import LiveVideoBox from './components/LiveVideoBox.vue';
|
||||
import JidiSelectorMod from '@/modules/jidiSelectorMod.vue';
|
||||
import { useUiStore } from '@/store/modules/ui';
|
||||
import { useMapDataStore } from '@/modules/map/stores/map-data.store';
|
||||
import { useMapStore } from '@/store/modules/map';
|
||||
|
||||
const uiStore = useUiStore();
|
||||
const mapDataStore = useMapDataStore();
|
||||
const mapStore = useMapStore();
|
||||
|
||||
// Tab相关
|
||||
const tabs = ref<any[]>([]);
|
||||
const activeTab = ref<string>("");
|
||||
const activeTab = ref<string>('');
|
||||
|
||||
// 视图布局选择（1/4/6/9宫格）
|
||||
const viewLayout = ref<"1" | "4" | "6" | "9">("4");
|
||||
const viewLayout = ref<'1' | '4' | '6' | '9'>('4');
|
||||
|
||||
// 监控类型（实时视频/录像）
|
||||
const monitorType = ref<"live" | "record">("live");
|
||||
const monitorType = ref<'live' | 'record'>('live');
|
||||
|
||||
// 搜索文本
|
||||
const searchText = ref("");
|
||||
const searchText = ref('');
|
||||
|
||||
// 状态筛选（在线/离线）
|
||||
const statusFilter = ref<"online" | "offline">("online");
|
||||
const statusFilter = ref<'online' | 'offline'>('online');
|
||||
|
||||
// 视频列表
|
||||
const videoList = ref<any[]>(Array(9).fill(null));
|
||||
|
||||
// 等待队列（存放超出布局限制的视频）
|
||||
const pendingVideoQueue = ref<any[]>([]);
|
||||
// 视频分布
|
||||
const isDistribution = ref(false);
|
||||
|
||||
// 视频点位图层筛选相关
|
||||
const VIDEO_POINT_LAYER_KEY = 'stinfo_video_point';
|
||||
const originalVideoPointData = ref<any[]>([]);
|
||||
// 移除视频
|
||||
const removeVideo = (index: number, nodeKey?: string) => {
|
||||
const videoData = videoList.value[index];
|
||||
@ -251,7 +296,7 @@ const removeVideo = (index: number, nodeKey?: string) => {
|
||||
// 如果有关联的节点key，则取消勾选
|
||||
if (keyToRemove) {
|
||||
// 从 checkedKeys 中移除该节点的 key（使用 filter 创建新数组以触发响应式）
|
||||
checkedKeys.value = checkedKeys.value.filter((key) => key !== keyToRemove);
|
||||
checkedKeys.value = checkedKeys.value.filter(key => key !== keyToRemove);
|
||||
|
||||
// 检查并移除不再需要的父节点
|
||||
removeUnnecessaryParentKeys(keyToRemove);
|
||||
@ -286,7 +331,7 @@ const addVideo = (videoData: any) => {
|
||||
videoList.value.push(videoData);
|
||||
} else {
|
||||
// 如果满了，加入等待队列
|
||||
if (!pendingVideoQueue.value.find((v) => v.key === videoData.key)) {
|
||||
if (!pendingVideoQueue.value.find(v => v.key === videoData.key)) {
|
||||
pendingVideoQueue.value.push(videoData);
|
||||
}
|
||||
}
|
||||
@ -299,9 +344,13 @@ watch(viewLayout, (newLayout, oldLayout) => {
|
||||
|
||||
// 布局减小时，超出部分移入队列
|
||||
if (newMaxCount < oldMaxCount) {
|
||||
for (let i = newMaxCount; i < oldMaxCount && i < videoList.value.length; i++) {
|
||||
for (
|
||||
let i = newMaxCount;
|
||||
i < oldMaxCount && i < videoList.value.length;
|
||||
i++
|
||||
) {
|
||||
const video = videoList.value[i];
|
||||
if (video && !pendingVideoQueue.value.find((v) => v.key === video.key)) {
|
||||
if (video && !pendingVideoQueue.value.find(v => v.key === video.key)) {
|
||||
pendingVideoQueue.value.push(video);
|
||||
}
|
||||
videoList.value[i] = null;
|
||||
@ -316,7 +365,11 @@ watch(viewLayout, (newLayout, oldLayout) => {
|
||||
// 布局增大时，从队列填充新空位
|
||||
if (newMaxCount > oldMaxCount) {
|
||||
const availableSlots = newMaxCount - oldMaxCount;
|
||||
for (let i = 0; i < availableSlots && pendingVideoQueue.value.length > 0; i++) {
|
||||
for (
|
||||
let i = 0;
|
||||
i < availableSlots && pendingVideoQueue.value.length > 0;
|
||||
i++
|
||||
) {
|
||||
const emptyIndex = videoList.value.findIndex(
|
||||
(v, i) => i < newMaxCount && (v === null || v === undefined)
|
||||
);
|
||||
@ -339,7 +392,7 @@ const treeLoading = ref(false);
|
||||
let currentRequestId = 0; // 用于追踪最新的请求ID
|
||||
|
||||
// 日期范围（默认前7天）
|
||||
const dateRange = ref<[Dayjs, Dayjs]>([dayjs().subtract(7, "day"), dayjs()]);
|
||||
const dateRange = ref<[Dayjs, Dayjs]>([dayjs().subtract(7, 'day'), dayjs()]);
|
||||
|
||||
// 录像列表
|
||||
const recordLoading = ref(false);
|
||||
@ -383,44 +436,45 @@ const loadRecordList = async () => {
|
||||
|
||||
const params = {
|
||||
filter: {
|
||||
logic: "and",
|
||||
logic: 'and',
|
||||
filters: [
|
||||
{
|
||||
field: "stcd",
|
||||
operator: "in",
|
||||
value: originalIds,
|
||||
field: 'stcd',
|
||||
operator: 'in',
|
||||
value: originalIds
|
||||
},
|
||||
{
|
||||
field: "tm",
|
||||
operator: "gte",
|
||||
dataType: "date",
|
||||
value: dateRange.value[0].format("YYYY-MM-DD 00:00:00"),
|
||||
field: 'tm',
|
||||
operator: 'gte',
|
||||
dataType: 'date',
|
||||
value: dateRange.value[0].format('YYYY-MM-DD 00:00:00')
|
||||
},
|
||||
{
|
||||
field: "tm",
|
||||
operator: "lte",
|
||||
dataType: "date",
|
||||
value: dateRange.value[1].format("YYYY-MM-DD 23:59:59"),
|
||||
},
|
||||
],
|
||||
field: 'tm',
|
||||
operator: 'lte',
|
||||
dataType: 'date',
|
||||
value: dateRange.value[1].format('YYYY-MM-DD 23:59:59')
|
||||
}
|
||||
]
|
||||
},
|
||||
sort: [{ field: "tm", dir: "desc" }],
|
||||
sort: [{ field: 'tm', dir: 'desc' }]
|
||||
};
|
||||
|
||||
const res = await envVdRunDataGetKendoList(params);
|
||||
|
||||
if (res?.data?.data) {
|
||||
recordList.value = res.data.data.map((item: any) => ({
|
||||
name: item.name || item.stnm || "录像文件",
|
||||
time: item.tm ? dayjs(item.tm).format("YYYY-MM-DD HH:mm:ss") : "",
|
||||
...item,
|
||||
name: item.name || item.stnm || '录像文件',
|
||||
time: item.tm ? dayjs(item.tm).format('YYYY-MM-DD HH:mm:ss') : '',
|
||||
...item
|
||||
}));
|
||||
|
||||
// 如果有录像数据，默认播放第一个
|
||||
if (recordList.value.length > 0) {
|
||||
const firstRecord = recordList.value[0];
|
||||
// 使用 flpth 字段作为视频路径
|
||||
const videoPath = firstRecord.flpth || firstRecord.url || firstRecord.videoUrl;
|
||||
const videoPath =
|
||||
firstRecord.flpth || firstRecord.url || firstRecord.videoUrl;
|
||||
if (videoPath) {
|
||||
// 清空之前的视频
|
||||
videoList.value = Array(9).fill(null);
|
||||
@ -429,7 +483,7 @@ const loadRecordList = async () => {
|
||||
flnm: firstRecord.name,
|
||||
stnm: firstRecord.stnm,
|
||||
url: videoPath,
|
||||
...firstRecord,
|
||||
...firstRecord
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -443,9 +497,76 @@ const loadRecordList = async () => {
|
||||
}
|
||||
};
|
||||
|
||||
// 保存原始图层数据（仅在首次调用时缓存）
|
||||
const cacheOriginalVideoPointData = () => {
|
||||
if (originalVideoPointData.value.length > 0) return;
|
||||
const currentData = mapDataStore.getPointLayerData(VIDEO_POINT_LAYER_KEY);
|
||||
if (currentData.length > 0) {
|
||||
originalVideoPointData.value = [...currentData];
|
||||
}
|
||||
};
|
||||
|
||||
// 获取图层数据项的 sttpCode 值（兼容 sttpCode 和 sttp 字段）
|
||||
const getItemSttp = (item: any): string => {
|
||||
return String(item?.sttp || item?.sttpCode || '').toUpperCase();
|
||||
};
|
||||
|
||||
// 根据 sttpCode 筛选 stinfo_video_point 图层
|
||||
const filterVideoPointBySttp = (sttpCode: string | string[]) => {
|
||||
cacheOriginalVideoPointData();
|
||||
const original = originalVideoPointData.value;
|
||||
if (original.length === 0) return;
|
||||
|
||||
// 全部 tab：恢复所有原始数据
|
||||
if (Array.isArray(sttpCode) && sttpCode[0] === 'all') {
|
||||
mapStore.replacePointLayerData(VIDEO_POINT_LAYER_KEY, [...original], true);
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('sttpCode', sttpCode);
|
||||
console.log('original', original);
|
||||
// 按 sttpCode 筛选
|
||||
let filtered: any[];
|
||||
if (Array.isArray(sttpCode)) {
|
||||
const codeSet = new Set(sttpCode.map((c: string) => c.toUpperCase()));
|
||||
filtered = original.filter((item: any) => codeSet.has(getItemSttp(item)));
|
||||
} else {
|
||||
const code = sttpCode.toUpperCase();
|
||||
filtered = original.filter((item: any) => getItemSttp(item) === code);
|
||||
}
|
||||
console.log('filtered', filtered);
|
||||
|
||||
mapStore.replacePointLayerData(VIDEO_POINT_LAYER_KEY, filtered, true);
|
||||
};
|
||||
|
||||
// 恢复视频点位图层为原始全量数据
|
||||
const resetVideoPointFilter = () => {
|
||||
if (originalVideoPointData.value.length > 0) {
|
||||
mapStore.replacePointLayerData(
|
||||
VIDEO_POINT_LAYER_KEY,
|
||||
[...originalVideoPointData.value],
|
||||
true
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
// 处理按钮点击
|
||||
const handleAction = () => {
|
||||
// TODO: 实现查看分布功能
|
||||
isDistribution.value = !isDistribution.value;
|
||||
uiStore.drawerOpen = false;
|
||||
|
||||
// 进入分布模式时，按当前选中 tab 筛选图层
|
||||
if (isDistribution.value) {
|
||||
const currentTab = tabs.value.find(tab => tab.key === activeTab.value);
|
||||
if (currentTab && currentTab.title === '全部') {
|
||||
resetVideoPointFilter();
|
||||
} else if (currentTab?.data?.sttpCode) {
|
||||
filterVideoPointBySttp(currentTab.data.sttpCode);
|
||||
}
|
||||
} else {
|
||||
// 退出分布模式时，恢复原始全量数据
|
||||
resetVideoPointFilter();
|
||||
}
|
||||
};
|
||||
|
||||
// 播放录像
|
||||
@ -456,18 +577,23 @@ const handlePlayRecord = (record: any) => {
|
||||
const maxCount = parseInt(viewLayout.value);
|
||||
|
||||
// 检查是否已经添加过该录像（通过视频路径判断）
|
||||
const existingIndex = videoList.value.findIndex((v) => v && v.url === videoPath);
|
||||
const existingIndex = videoList.value.findIndex(
|
||||
v => v && v.url === videoPath
|
||||
);
|
||||
|
||||
if (existingIndex !== -1) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 检查当前已播放的视频数量
|
||||
const currentVideoCount = videoList.value.filter((v, i) => i < maxCount && v !== null)
|
||||
.length;
|
||||
const currentVideoCount = videoList.value.filter(
|
||||
(v, i) => i < maxCount && v !== null
|
||||
).length;
|
||||
|
||||
if (currentVideoCount >= maxCount) {
|
||||
message.warning(`视频数量已达上限(${maxCount})，请关闭已打开的视频或调整宫格布局`);
|
||||
message.warning(
|
||||
`视频数量已达上限(${maxCount})，请关闭已打开的视频或调整宫格布局`
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
@ -476,7 +602,7 @@ const handlePlayRecord = (record: any) => {
|
||||
flnm: record.name,
|
||||
stnm: record.stnm,
|
||||
url: videoPath,
|
||||
...record,
|
||||
...record
|
||||
});
|
||||
}
|
||||
};
|
||||
@ -484,21 +610,21 @@ const handlePlayRecord = (record: any) => {
|
||||
const init = async () => {
|
||||
const params = {
|
||||
filter: {
|
||||
logic: "and",
|
||||
logic: 'and',
|
||||
filters: [
|
||||
{
|
||||
field: "sttpFullPath",
|
||||
operator: "contains",
|
||||
dataType: "string",
|
||||
value: "VD,VD_",
|
||||
},
|
||||
],
|
||||
field: 'sttpFullPath',
|
||||
operator: 'contains',
|
||||
dataType: 'string',
|
||||
value: 'VD,VD_'
|
||||
}
|
||||
]
|
||||
},
|
||||
group: [
|
||||
{ dir: "asc", field: "sttpCode" },
|
||||
{ dir: "asc", field: "sttpName" },
|
||||
{ dir: 'asc', field: 'sttpCode' },
|
||||
{ dir: 'asc', field: 'sttpName' }
|
||||
],
|
||||
groupResultFlat: true,
|
||||
groupResultFlat: true
|
||||
};
|
||||
|
||||
let res = await baseMsstbprpt(params);
|
||||
@ -508,7 +634,7 @@ const init = async () => {
|
||||
|
||||
// 合并生态流量
|
||||
res.data.data.forEach((el: any) => {
|
||||
if (el?.sttpCode == "VD_EQ" || el?.sttpCode == "VD_EQS") {
|
||||
if (el?.sttpCode == 'VD_EQ' || el?.sttpCode == 'VD_EQS') {
|
||||
const found = _list.find((item: any) => Array.isArray(item.sttpCode));
|
||||
|
||||
if (found) {
|
||||
@ -521,26 +647,27 @@ const init = async () => {
|
||||
...el,
|
||||
sttpCode: [el?.sttpCode],
|
||||
sttpCode_value: [el?.sttpCode],
|
||||
sttpName: "生态流量",
|
||||
sttpName_value: "生态流量",
|
||||
sttpName: '生态流量',
|
||||
sttpName_value: '生态流量'
|
||||
});
|
||||
}
|
||||
} else if (el?.sttpCode != "VD_FPRD") {
|
||||
} else if (el?.sttpCode != 'VD_FPRD') {
|
||||
_list.push(el);
|
||||
}
|
||||
});
|
||||
|
||||
const list =
|
||||
_list.sort((a: any, b: any) => b?.count_sttpCode - a?.count_sttpCode) ?? [];
|
||||
_list.sort((a: any, b: any) => b?.count_sttpCode - a?.count_sttpCode) ??
|
||||
[];
|
||||
const totalCount = list.reduce((sum, item) => sum + item.count_sttpCode, 0);
|
||||
|
||||
const allObject = {
|
||||
sttpCode: ["all"],
|
||||
sttpCode_value: ["all"],
|
||||
sttpCode: ['all'],
|
||||
sttpCode_value: ['all'],
|
||||
count_sttpCode: totalCount,
|
||||
count_sttpName: "全部",
|
||||
sttpName: "全部",
|
||||
sttpName_value: "全部",
|
||||
count_sttpName: '全部',
|
||||
sttpName: '全部',
|
||||
sttpName_value: '全部'
|
||||
};
|
||||
|
||||
list.unshift(allObject);
|
||||
@ -549,7 +676,7 @@ const init = async () => {
|
||||
tabs.value = list.map((item: any, index: number) => ({
|
||||
key: String(index),
|
||||
title: item.sttpName || item.sttpName_value,
|
||||
data: item,
|
||||
data: item
|
||||
}));
|
||||
|
||||
// 设置默认选中的tab
|
||||
@ -570,7 +697,7 @@ const initTree = async () => {
|
||||
const requestId = ++currentRequestId;
|
||||
|
||||
// 获取当前选中tab的数据
|
||||
const currentTab = tabs.value.find((tab) => tab.key === activeTab.value);
|
||||
const currentTab = tabs.value.find(tab => tab.key === activeTab.value);
|
||||
if (!currentTab) return;
|
||||
|
||||
const sttpCodeValue = currentTab.data?.sttpCode_value || [];
|
||||
@ -579,32 +706,32 @@ const initTree = async () => {
|
||||
const filters: any[] = [];
|
||||
|
||||
// 录像模式不传status，只传sttpCode
|
||||
if (monitorType.value === "live") {
|
||||
if (monitorType.value === 'live') {
|
||||
// 实时视频模式：添加status筛选
|
||||
const statusValue = statusFilter.value === "online" ? 1 : 0;
|
||||
const statusValue = statusFilter.value === 'online' ? 1 : 0;
|
||||
filters.push({
|
||||
field: "status",
|
||||
operator: "eq",
|
||||
dataType: "string",
|
||||
value: statusValue,
|
||||
field: 'status',
|
||||
operator: 'eq',
|
||||
dataType: 'string',
|
||||
value: statusValue
|
||||
});
|
||||
}
|
||||
|
||||
// 如果不是"全部"tab，才添加sttpCode筛选
|
||||
if (sttpCodeValue[0] !== "all") {
|
||||
if (sttpCodeValue[0] !== 'all') {
|
||||
filters.push({
|
||||
field: "sttpCode",
|
||||
operator: "in",
|
||||
dataType: "string",
|
||||
value: [sttpCodeValue],
|
||||
field: 'sttpCode',
|
||||
operator: 'in',
|
||||
dataType: 'string',
|
||||
value: [sttpCodeValue]
|
||||
});
|
||||
}
|
||||
|
||||
const params = {
|
||||
filter: {
|
||||
logic: "and",
|
||||
filters,
|
||||
},
|
||||
logic: 'and',
|
||||
filters
|
||||
}
|
||||
};
|
||||
|
||||
// 清空视频列表、勾选状态和等待队列
|
||||
@ -626,7 +753,7 @@ const initTree = async () => {
|
||||
// 为每个节点生成唯一的key
|
||||
let keyCounter = 0;
|
||||
const generateKey = (nodes: any[]) => {
|
||||
nodes.forEach((node) => {
|
||||
nodes.forEach(node => {
|
||||
node.key = `key_${keyCounter++}`;
|
||||
if (node.children && node.children.length > 0) {
|
||||
generateKey(node.children);
|
||||
@ -672,7 +799,7 @@ const initTree = async () => {
|
||||
addParentKeys(firstLeafKey); // 添加父节点
|
||||
|
||||
// 默认勾选后，需要手动添加视频
|
||||
if (monitorType.value === "live") {
|
||||
if (monitorType.value === 'live') {
|
||||
// 查找对应的节点数据
|
||||
const findNodeByKey = (nodes: any[], key: string): any => {
|
||||
for (const node of nodes) {
|
||||
@ -688,13 +815,15 @@ const initTree = async () => {
|
||||
const firstLeafNode = findNodeByKey(treeData.value, firstLeafKey);
|
||||
if (firstLeafNode) {
|
||||
const videoUrl =
|
||||
firstLeafNode.url || firstLeafNode.videoUrl || firstLeafNode.playUrl;
|
||||
firstLeafNode.url ||
|
||||
firstLeafNode.videoUrl ||
|
||||
firstLeafNode.playUrl;
|
||||
if (videoUrl) {
|
||||
addVideo({
|
||||
flnm: firstLeafNode.name,
|
||||
stnm: firstLeafNode.stnm,
|
||||
url: videoUrl,
|
||||
...firstLeafNode,
|
||||
...firstLeafNode
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -711,7 +840,24 @@ const initTree = async () => {
|
||||
// Tab切换处理
|
||||
const handleTabChange = (key: string) => {
|
||||
activeTab.value = key;
|
||||
|
||||
const currentTab = tabs.value.find(tab => tab.key === activeTab.value);
|
||||
if (currentTab) {
|
||||
// 全部 tab：恢复默认
|
||||
if (currentTab.title === '全部') {
|
||||
resetVideoPointFilter();
|
||||
} else {
|
||||
// 根据当前 tab 的 sttpCode 筛选图层
|
||||
const sttpCode = currentTab.data?.sttpCode;
|
||||
if (sttpCode) {
|
||||
filterVideoPointBySttp(sttpCode);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
initTree();
|
||||
if (isDistribution.value == true) {
|
||||
}
|
||||
};
|
||||
|
||||
// 状态筛选变化时重新加载树
|
||||
@ -722,8 +868,8 @@ watch(statusFilter, () => {
|
||||
// 监控类型切换处理
|
||||
const handleMonitorTypeChange = () => {
|
||||
// 切换到录像模式时，设置viewLayout为4，隐藏1宫格
|
||||
if (monitorType.value === "record") {
|
||||
viewLayout.value = "4";
|
||||
if (monitorType.value === 'record') {
|
||||
viewLayout.value = '4';
|
||||
// 清空中间视频
|
||||
videoList.value = Array(9).fill(null);
|
||||
checkedKeys.value = [];
|
||||
@ -731,16 +877,16 @@ const handleMonitorTypeChange = () => {
|
||||
}
|
||||
|
||||
// 切换到实时视频时，恢复在线默认状态
|
||||
if (monitorType.value === "live") {
|
||||
statusFilter.value = "online";
|
||||
if (monitorType.value === 'live') {
|
||||
statusFilter.value = 'online';
|
||||
// 如果当前是1宫格，保持不变；否则设置为4
|
||||
if (!["4", "6", "9"].includes(viewLayout.value)) {
|
||||
viewLayout.value = "4";
|
||||
if (!['4', '6', '9'].includes(viewLayout.value)) {
|
||||
viewLayout.value = '4';
|
||||
}
|
||||
}
|
||||
|
||||
// 清空搜索
|
||||
searchText.value = "";
|
||||
searchText.value = '';
|
||||
// 重新加载树
|
||||
initTree();
|
||||
};
|
||||
@ -748,7 +894,7 @@ const handleMonitorTypeChange = () => {
|
||||
// 树节点勾选处理
|
||||
const handleTreeSelect = (checkedKeysValue: any[], info: any) => {
|
||||
// 只在实时视频模式下响应勾选
|
||||
if (monitorType.value !== "live") return;
|
||||
if (monitorType.value !== 'live') return;
|
||||
|
||||
const nodeData = info.node;
|
||||
|
||||
@ -772,19 +918,19 @@ const handleTreeSelect = (checkedKeysValue: any[], info: any) => {
|
||||
flnm: nodeData.name,
|
||||
stnm: nodeData.stnm,
|
||||
url: videoUrl,
|
||||
...nodeData,
|
||||
...nodeData
|
||||
});
|
||||
|
||||
// 自动添加所有父节点到 checkedKeys
|
||||
addParentKeys(nodeData.key);
|
||||
} else {
|
||||
// 超出限制，加入等待队列（保持勾选状态）
|
||||
if (!pendingVideoQueue.value.find((v) => v.key === nodeData.key)) {
|
||||
if (!pendingVideoQueue.value.find(v => v.key === nodeData.key)) {
|
||||
pendingVideoQueue.value.push({
|
||||
flnm: nodeData.name,
|
||||
stnm: nodeData.stnm,
|
||||
url: videoUrl,
|
||||
...nodeData,
|
||||
...nodeData
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -799,7 +945,7 @@ const handleTreeSelect = (checkedKeysValue: any[], info: any) => {
|
||||
if (!nodeData.children || nodeData.children.length === 0) {
|
||||
// 先检查是否在队列中
|
||||
const queueIndex = pendingVideoQueue.value.findIndex(
|
||||
(v) => v.key === nodeData.key
|
||||
v => v.key === nodeData.key
|
||||
);
|
||||
if (queueIndex !== -1) {
|
||||
// 从队列中移除
|
||||
@ -824,7 +970,7 @@ const handleTreeSelect = (checkedKeysValue: any[], info: any) => {
|
||||
const addParentKeys = (childKey: string) => {
|
||||
const parentKeys = getParentKeys(childKey);
|
||||
|
||||
parentKeys.forEach((parentKey) => {
|
||||
parentKeys.forEach(parentKey => {
|
||||
// 查找父节点
|
||||
const findNode = (nodes: any[], key: string): any => {
|
||||
for (const node of nodes) {
|
||||
@ -880,7 +1026,7 @@ const getParentKeys = (childKey: string): string[] => {
|
||||
const removeUnnecessaryParentKeys = (childKey: string) => {
|
||||
const parentKeys = getParentKeys(childKey);
|
||||
|
||||
parentKeys.forEach((parentKey) => {
|
||||
parentKeys.forEach(parentKey => {
|
||||
// 查找父节点
|
||||
const findNode = (nodes: any[], key: string): any => {
|
||||
for (const node of nodes) {
|
||||
@ -900,7 +1046,7 @@ const removeUnnecessaryParentKeys = (childKey: string) => {
|
||||
|
||||
if (!allDirectChildrenChecked) {
|
||||
// 不是所有直接子节点都被勾选，移除父节点
|
||||
checkedKeys.value = checkedKeys.value.filter((key) => key !== parentKey);
|
||||
checkedKeys.value = checkedKeys.value.filter(key => key !== parentKey);
|
||||
|
||||
// 递归检查父节点的父节点
|
||||
removeUnnecessaryParentKeys(parentKey);
|
||||
@ -916,7 +1062,9 @@ const areAllDirectChildrenChecked = (parentNode: any): boolean => {
|
||||
}
|
||||
|
||||
// 检查所有直接子节点是否都在 checkedKeys 中
|
||||
return parentNode.children.every((child: any) => checkedKeys.value.includes(child.key));
|
||||
return parentNode.children.every((child: any) =>
|
||||
checkedKeys.value.includes(child.key)
|
||||
);
|
||||
};
|
||||
|
||||
// 检查父节点下的所有子节点是否都被勾选
|
||||
@ -948,7 +1096,7 @@ const addVideosFromNodeWithLimit = (node: any) => {
|
||||
const maxCount = parseInt(viewLayout.value);
|
||||
|
||||
// 先移除父节点本身的 key（因为我们只关心子节点）
|
||||
checkedKeys.value = checkedKeys.value.filter((key) => key !== node.key);
|
||||
checkedKeys.value = checkedKeys.value.filter(key => key !== node.key);
|
||||
|
||||
// 获取当前已添加的视频数量
|
||||
const getCurrentVideoCount = () => {
|
||||
@ -978,12 +1126,12 @@ const addVideosFromNodeWithLimit = (node: any) => {
|
||||
if (remainingSlots <= 0) {
|
||||
// 没有剩余位置，全部加入队列
|
||||
allLeafNodes.forEach((leafNode: any) => {
|
||||
if (!pendingVideoQueue.value.find((v) => v.key === leafNode.key)) {
|
||||
if (!pendingVideoQueue.value.find(v => v.key === leafNode.key)) {
|
||||
pendingVideoQueue.value.push({
|
||||
flnm: leafNode.name,
|
||||
stnm: leafNode.stnm,
|
||||
url: leafNode.url || leafNode.videoUrl || leafNode.playUrl,
|
||||
...leafNode,
|
||||
...leafNode
|
||||
});
|
||||
}
|
||||
});
|
||||
@ -1000,7 +1148,7 @@ const addVideosFromNodeWithLimit = (node: any) => {
|
||||
flnm: leafNode.name,
|
||||
stnm: leafNode.stnm,
|
||||
url: leafNode.url || leafNode.videoUrl || leafNode.playUrl,
|
||||
...leafNode,
|
||||
...leafNode
|
||||
});
|
||||
|
||||
// 将子节点 key 添加到 checkedKeys（不添加父节点）
|
||||
@ -1012,12 +1160,12 @@ const addVideosFromNodeWithLimit = (node: any) => {
|
||||
// 超出限制的节点加入队列（保持勾选状态）
|
||||
if (nodesToQueue.length > 0) {
|
||||
nodesToQueue.forEach((leafNode: any) => {
|
||||
if (!pendingVideoQueue.value.find((v) => v.key === leafNode.key)) {
|
||||
if (!pendingVideoQueue.value.find(v => v.key === leafNode.key)) {
|
||||
pendingVideoQueue.value.push({
|
||||
flnm: leafNode.name,
|
||||
stnm: leafNode.stnm,
|
||||
url: leafNode.url || leafNode.videoUrl || leafNode.playUrl,
|
||||
...leafNode,
|
||||
...leafNode
|
||||
});
|
||||
}
|
||||
});
|
||||
@ -1047,15 +1195,15 @@ const removeVideosFromNode = (node: any) => {
|
||||
// 根据节点key移除视频
|
||||
const removeVideoByNodeKey = (nodeKey: string) => {
|
||||
// 先检查是否在队列中
|
||||
const queueIndex = pendingVideoQueue.value.findIndex(
|
||||
(v) => v.key === nodeKey
|
||||
);
|
||||
const queueIndex = pendingVideoQueue.value.findIndex(v => v.key === nodeKey);
|
||||
if (queueIndex !== -1) {
|
||||
pendingVideoQueue.value.splice(queueIndex, 1);
|
||||
return;
|
||||
}
|
||||
|
||||
const index = videoList.value.findIndex((video) => video && video.key === nodeKey);
|
||||
const index = videoList.value.findIndex(
|
||||
video => video && video.key === nodeKey
|
||||
);
|
||||
if (index !== -1) {
|
||||
videoList.value[index] = null;
|
||||
// 尝试从队列补位
|
||||
@ -1067,7 +1215,7 @@ const removeVideoByNodeKey = (nodeKey: string) => {
|
||||
watch(
|
||||
[checkedKeys, dateRange, monitorType],
|
||||
([newCheckedKeys, newDateRange, newMonitorType]) => {
|
||||
if (newMonitorType === "record") {
|
||||
if (newMonitorType === 'record') {
|
||||
loadRecordList();
|
||||
} else {
|
||||
recordList.value = [];
|
||||
@ -1076,13 +1224,13 @@ watch(
|
||||
);
|
||||
|
||||
// 监听搜索文本变化，实时过滤
|
||||
watch(searchText, (newValue) => {
|
||||
watch(searchText, newValue => {
|
||||
filterTree(newValue);
|
||||
});
|
||||
|
||||
// 过滤树形数据
|
||||
const filterTree = (keyword: string) => {
|
||||
if (!keyword || keyword.trim() === "") {
|
||||
if (!keyword || keyword.trim() === '') {
|
||||
// 清空搜索时恢复原始数据
|
||||
treeData.value = JSON.parse(JSON.stringify(originalTreeData.value));
|
||||
|
||||
@ -1108,8 +1256,8 @@ const filterTree = (keyword: string) => {
|
||||
const filterNodes = (nodes: any[]): any[] => {
|
||||
const filtered: any[] = [];
|
||||
|
||||
nodes.forEach((node) => {
|
||||
const nodeName = (node.name || "").toLowerCase();
|
||||
nodes.forEach(node => {
|
||||
const nodeName = (node.name || '').toLowerCase();
|
||||
const hasChildren = node.children && node.children.length > 0;
|
||||
|
||||
if (hasChildren) {
|
||||
@ -1120,7 +1268,8 @@ const filterTree = (keyword: string) => {
|
||||
if (nodeName.includes(lowerKeyword) || filteredChildren.length > 0) {
|
||||
filtered.push({
|
||||
...node,
|
||||
children: filteredChildren.length > 0 ? filteredChildren : node.children,
|
||||
children:
|
||||
filteredChildren.length > 0 ? filteredChildren : node.children
|
||||
});
|
||||
}
|
||||
} else {
|
||||
@ -1139,7 +1288,7 @@ const filterTree = (keyword: string) => {
|
||||
// 搜索时展开所有匹配的节点
|
||||
const getAllKeys = (nodes: any[]): string[] => {
|
||||
let keys: string[] = [];
|
||||
nodes.forEach((node) => {
|
||||
nodes.forEach(node => {
|
||||
if (node.children && node.children.length > 0) {
|
||||
keys.push(node.key);
|
||||
keys = keys.concat(getAllKeys(node.children));
|
||||
@ -1154,6 +1303,10 @@ const filterTree = (keyword: string) => {
|
||||
onMounted(() => {
|
||||
init();
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
uiStore.drawerOpen = true;
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@ -1173,6 +1326,17 @@ onMounted(() => {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.shiPinJianKongZhuanTi-page-distribution {
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.shiPinJianKongZhuanTi-JidiSelectorMod {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 110px;
|
||||
z-index: 3000;
|
||||
}
|
||||
|
||||
.custom-tabs {
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
@ -1189,7 +1353,7 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.ant-tabs-ink-bar {
|
||||
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAFCAYAAACXU8ZrAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABZ0RVh0Q3JlYXRpb24gVGltZQAxMS8wMy8yMrqNQAoAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzbovLKMAAAAOklEQVQImWNgQAchkx3QhZhQeEFTExj+MexnCJoyH1mYEUUBwz8kScYFDOtyEhGKMBSgKmTErQChEAA6FRM7O0rIOgAAAABJRU5ErkJggg==")
|
||||
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAFCAYAAACXU8ZrAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABZ0RVh0Q3JlYXRpb24gVGltZQAxMS8wMy8yMrqNQAoAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzbovLKMAAAAOklEQVQImWNgQAchkx3QhZhQeEFTExj+MexnCJoyH1mYEUUBwz8kScYFDOtyEhGKMBSgKmTErQChEAA6FRM7O0rIOgAAAABJRU5ErkJggg==')
|
||||
no-repeat center bottom;
|
||||
border-bottom: 2px solid #005293;
|
||||
height: 7px;
|
||||
@ -1360,7 +1524,7 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -3px;
|
||||
right: 0px;
|
||||
@ -1395,7 +1559,6 @@ onMounted(() => {
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
color: red;
|
||||
}
|
||||
|
||||
:deep(.ant-tree) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user