master #2

Merged
bichangxiong merged 4 commits from master into prod 2025-08-28 17:54:11 +08:00
8 changed files with 257 additions and 369 deletions

View File

@@ -1,5 +1,7 @@
export interface AddStreamProxyResult {
key:string;
app:string;
streamId:string;
rtsp:string;
rtmp:string;
flv:string;

View File

@@ -1,374 +1,262 @@
<script setup lang="ts">
import * as echarts from "echarts";
import { onMounted, ref } from "vue";
import type { Dayjs } from "dayjs";
import dayjs from "dayjs";
import { Page } from "@vben/common-ui";
import { DatePicker } from "ant-design-vue";
import FloorTree from "../components/floor-tree.vue";
import { meterRecordTrend } from "#/api/property/energyManagement/meterRecord";
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';
import type { Dayjs } from 'dayjs';
import dayjs from 'dayjs';
import { Page } from '@vben/common-ui';
import { DatePicker } from 'ant-design-vue';
import FloorTree from '../components/floor-tree.vue';
import { meterRecordTrend } from '#/api/property/energyManagement/meterRecord';
const currentDay = ref<Dayjs>(dayjs());
const currentMonth = ref<Dayjs>(dayjs());
const currentYear = ref<Dayjs>(dayjs());
const disabledDay = (current: Dayjs) => {
return current && current > dayjs().endOf("day");
return current && current > dayjs().endOf('day');
};
const disabledMonth = (current: Dayjs) => {
return current && current > dayjs().endOf("month");
return current && current > dayjs().endOf('month');
};
const disabledYear = (current: Dayjs) => {
return current && current > dayjs().endOf("year");
return current && current > dayjs().endOf('year');
};
const chartInstances = ref({
day: null as echarts.ECharts | null,
month: null as echarts.ECharts | null,
year: null as echarts.ECharts | null,
});
onMounted(() => {
//day
const chartDay = document.getElementById("day");
const myChartDay = echarts.init(chartDay);
const chartDay = document.getElementById('day');
chartInstances.value.day = echarts.init(chartDay);
const optionDay = {
tooltip: {
trigger: "axis",
trigger: 'axis',
},
legend: {
data: ["当日", "昨日"],
data: ['当日', '昨日'],
},
toolbox: {
show: true,
feature: {
magicType: { show: true, type: ["line", "bar"] },
magicType: { show: true, type: ['line', 'bar'] },
restore: { show: true },
},
},
calculable: true,
xAxis: [
{
type: "category",
name: "时",
data: [
"00:00",
"01:00",
"02:00",
"03:00",
"04:00",
"05:00",
"06:00",
"07:00",
"08:00",
"09:00",
"10:00",
"11:00",
"12:00",
"13:00",
"14:00",
"15:00",
"16:00",
"17:00",
"18:00",
"19:00",
"20:00",
"21:00",
"22:00",
"23:00",
],
type: 'category',
name: '时',
data: [],
},
],
yAxis: [
{
type: "value",
name: "KW.h",
type: 'value',
name: 'KW.h',
},
],
series: [
{
name: "当日",
type: "bar",
data: [
2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3,
2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3,
],
name: '当日',
type: 'bar',
data: [],
markPoint: {
data: [
{ type: "max", name: "Max" },
{ type: "min", name: "Min" },
],
},
},
{
name: "昨日",
type: "bar",
data: [
2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 152.2, 48.7, 18.8, 6.0, 2.3,
2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3,
],
markPoint: {
data: [
{ type: "max", name: "Max" },
{ type: "min", name: "Min" },
{ type: 'max', name: 'Max' },
{ type: 'min', name: 'Min' },
],
},
},
],
dataZoom: [
{
type: "inside",
type: 'inside',
xAxisIndex: 0,
zoomOnMouseWheel: true,
filterMode: "filter",
filterMode: 'filter',
},
],
};
optionDay && myChartDay.setOption(optionDay);
optionDay && chartInstances.value.day.setOption(optionDay);
//month
const chartMonth = document.getElementById("month");
const myChartMonth = echarts.init(chartMonth);
const chartMonth = document.getElementById('month');
chartInstances.value.month = echarts.init(chartMonth);
const optionMonth = {
tooltip: {
trigger: "axis",
trigger: 'axis',
},
legend: {
data: ["当月", "上月"],
data: ['当月', '上月'],
},
toolbox: {
show: true,
feature: {
magicType: { show: true, type: ["line", "bar"] },
magicType: { show: true, type: ['line', 'bar'] },
restore: { show: true },
},
},
calculable: true,
xAxis: [
{
type: "category",
name: "日",
data: [
"01",
"02",
"03",
"04",
"05",
"06",
"07",
"08",
"09",
"10",
"11",
"12",
"13",
"14",
"15",
"16",
"17",
"18",
"19",
"20",
"21",
"22",
"23",
"24",
"25",
"26",
"27",
"28",
"29",
"30",
"31",
],
type: 'category',
name: '日',
data: [],
},
],
yAxis: [
{
type: "value",
name: "KW.h",
type: 'value',
name: 'KW.h',
},
],
series: [
{
name: "当月",
type: "bar",
data: [
2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3,
2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3,
2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6,
],
name: '当月',
type: 'bar',
data: [],
markPoint: {
data: [
{ type: "max", name: "Max" },
{ type: "min", name: "Min" },
],
},
},
{
name: "上月",
type: "bar",
data: [
2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3,
2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3,
2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6,
],
markPoint: {
data: [
{ type: "max", name: "Max" },
{ type: "min", name: "Min" },
{ type: 'max', name: 'Max' },
{ type: 'min', name: 'Min' },
],
},
},
],
dataZoom: [
{
type: "inside",
type: 'inside',
xAxisIndex: 0,
zoomOnMouseWheel: true,
filterMode: "filter",
filterMode: 'filter',
},
],
};
optionMonth && myChartMonth.setOption(optionMonth);
optionMonth && chartInstances.value.month.setOption(optionMonth);
//year
const chartYear = document.getElementById("year");
const myChartYear = echarts.init(chartYear);
const chartYear = document.getElementById('year');
chartInstances.value.year = echarts.init(chartYear);
const optionYear = {
tooltip: {
trigger: "axis",
trigger: 'axis',
},
legend: {
data: ["当年", "去年"],
data: ['当年', '去年'],
},
toolbox: {
show: true,
feature: {
magicType: { show: true, type: ["line", "bar"] },
magicType: { show: true, type: ['line', 'bar'] },
restore: { show: true },
},
},
calculable: true,
xAxis: [
{
type: "category",
name: "月",
data: [
"01",
"02",
"03",
"04",
"05",
"06",
"07",
"08",
"09",
"10",
"11",
"12",
],
type: 'category',
name: '月',
data: [],
},
],
yAxis: [
{
type: "value",
name: "KW.h",
type: 'value',
name: 'KW.h',
},
],
series: [
{
name: "当年",
type: "bar",
data: [
2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3,
],
name: '当年',
type: 'bar',
data: [],
markPoint: {
data: [
{ type: "max", name: "Max" },
{ type: "min", name: "Min" },
],
},
},
{
name: "去年",
type: "bar",
data: [
2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3,
],
markPoint: {
data: [
{ type: "max", name: "Max" },
{ type: "min", name: "Min" },
{ type: 'max', name: 'Max' },
{ type: 'min', name: 'Min' },
],
},
},
],
dataZoom: [
{
type: "inside",
type: 'inside',
xAxisIndex: 0,
zoomOnMouseWheel: true,
filterMode: "filter",
filterMode: 'filter',
},
],
};
optionYear && myChartYear.setOption(optionYear);
optionYear && chartInstances.value.year.setOption(optionYear);
// 鼠标悬停时激活缩放
myChartDay.on("mouseover", { seriesIndex: 0 }, () => {
myChartDay.dispatchAction({
type: "takeGlobalCursor",
key: "dataZoomSelect",
chartInstances.value.day.on('mouseover', { seriesIndex: 0 }, () => {
chartInstances.value.day.dispatchAction({
type: 'takeGlobalCursor',
key: 'dataZoomSelect',
dataZoomSelectActive: true,
});
});
// 鼠标离开时取消缩放
myChartDay.on("mouseout", { seriesIndex: 0 }, () => {
myChartDay.dispatchAction({
type: "takeGlobalCursor",
key: "dataZoomSelect",
chartInstances.value.day.on('mouseout', { seriesIndex: 0 }, () => {
chartInstances.value.day.dispatchAction({
type: 'takeGlobalCursor',
key: 'dataZoomSelect',
dataZoomSelectActive: false,
});
});
// 鼠标悬停时激活缩放
myChartYear.on("mouseover", { seriesIndex: 0 }, () => {
myChartYear.dispatchAction({
type: "takeGlobalCursor",
key: "dataZoomSelect",
chartInstances.value.year.on('mouseover', { seriesIndex: 0 }, () => {
chartInstances.value.year.dispatchAction({
type: 'takeGlobalCursor',
key: 'dataZoomSelect',
dataZoomSelectActive: true,
});
});
// 鼠标离开时取消缩放
myChartYear.on("mouseout", { seriesIndex: 0 }, () => {
myChartYear.dispatchAction({
type: "takeGlobalCursor",
key: "dataZoomSelect",
chartInstances.value.year.on('mouseout', { seriesIndex: 0 }, () => {
chartInstances.value.year.dispatchAction({
type: 'takeGlobalCursor',
key: 'dataZoomSelect',
dataZoomSelectActive: false,
});
});
// 鼠标悬停时激活缩放
myChartMonth.on("mouseover", { seriesIndex: 0 }, () => {
myChartMonth.dispatchAction({
type: "takeGlobalCursor",
key: "dataZoomSelect",
chartInstances.value.month.on('mouseover', { seriesIndex: 0 }, () => {
chartInstances.value.month.dispatchAction({
type: 'takeGlobalCursor',
key: 'dataZoomSelect',
dataZoomSelectActive: true,
});
});
// 鼠标离开时取消缩放
myChartMonth.on("mouseout", { seriesIndex: 0 }, () => {
myChartMonth.dispatchAction({
type: "takeGlobalCursor",
key: "dataZoomSelect",
chartInstances.value.month.on('mouseout', { seriesIndex: 0 }, () => {
chartInstances.value.month.dispatchAction({
type: 'takeGlobalCursor',
key: 'dataZoomSelect',
dataZoomSelectActive: false,
});
});
});
function handleSelectFloor(selectedKeys, info) {
const trendData = ref<any>({});
async function handleSelectFloor(selectedKeys, info) {
let data = {
day: currentDay.value.format("YYYY-MM-DD"),
month: currentMonth.value.format("YYYY-MM"),
year: currentYear.value.format("YYYY"),
day: currentDay.value.format('YYYY-MM-DD'),
month: currentMonth.value.format('YYYY-MM'),
year: currentYear.value.format('YYYY'),
meterType: 1,
meterId: null,
floorId: null,
};
if (info.node.level == 3) {
@@ -377,47 +265,117 @@ function handleSelectFloor(selectedKeys, info) {
data.meterId = selectedKeys[0];
}
meterRecordTrend(data);
const trend = await meterRecordTrend(data);
// 更新日数据图表
if (chartInstances.value.day && trend.hour) {
chartInstances.value.day.setOption({
xAxis: {
data: trend.hour.categories || [],
},
series: [
{
name: '当月',
data: trend.hour.data || [],
},
],
});
}
// 更新月数据图表
if (chartInstances.value.month && trend.day) {
chartInstances.value.month.setOption({
xAxis: {
data: trend.day.categories || [],
},
series: [
{
name: '当月',
data: trend.day.data || [],
},
],
});
}
// 更新年数据图表
if (chartInstances.value.year && trend.month) {
chartInstances.value.year.setOption({
xAxis: {
data: trend.month.categories || [],
},
series: [
{
name: '当年',
data: trend.month.data || [],
},
],
});
}
}
</script>
<template>
<Page :auto-content-height="true">
<div class="flex h-full gap-[8px]">
<FloorTree class="w-[260px]"
@select="handleSelectFloor"></FloorTree>
<div class=" flex-1 overflow-hidden">
<div style="background: #fff;border-radius: 8px;padding: 10px;height: 33%">
<FloorTree class="w-[260px]" @select="handleSelectFloor"></FloorTree>
<div class="flex-1 overflow-hidden">
<div
style="
background: #fff;
border-radius: 8px;
padding: 10px;
height: 33%;
"
>
<div>
<div style="display: flex;justify-content: space-between;">
<DatePicker v-model:value="currentDay"
:disabled-date="disabledDay" />当日能耗总值125.04KW.h
<div style="display: flex; justify-content: space-between">
<DatePicker
v-model:value="currentDay"
:disabled-date="disabledDay"
/>当日能耗总值125.04KW.h
</div>
</div>
<div id="day"
style="height: 100%;width: 100%;"></div>
<div id="day" style="height: 100%; width: 100%"></div>
</div>
<div style="background: #fff;border-radius: 8px;padding: 10px;margin-top: 16px;height: 33%">
<div
style="
background: #fff;
border-radius: 8px;
padding: 10px;
margin-top: 16px;
height: 33%;
"
>
<div>
<div style="display: flex;justify-content: space-between;">
<DatePicker v-model:value="currentMonth"
<div style="display: flex; justify-content: space-between">
<DatePicker
v-model:value="currentMonth"
:disabled-date="disabledMonth"
picker="month" />当月能耗总值125.04KW.h
picker="month"
/>当月能耗总值125.04KW.h
</div>
</div>
<div id="month"
style="height: 100%;width: 100%;"></div>
<div id="month" style="height: 100%; width: 100%"></div>
</div>
<div style="background: #fff;border-radius: 8px;padding: 10px;margin-top: 16px;height: 33%">
<div
style="
background: #fff;
border-radius: 8px;
padding: 10px;
margin-top: 16px;
height: 33%;
"
>
<div>
<div style="display: flex;justify-content: space-between;">
<DatePicker v-model:value="currentYear"
<div style="display: flex; justify-content: space-between">
<DatePicker
v-model:value="currentYear"
:disabled-date="disabledYear"
picker="year" />当年能耗总值125.04KW.h
picker="year"
/>当年能耗总值125.04KW.h
</div>
</div>
<div id="year"
style="height: 100%;width: 100%;"></div>
<div id="year" style="height: 100%; width: 100%"></div>
</div>
</div>
</div>

View File

@@ -57,10 +57,6 @@ async function externalLoginOnLoad() {
if (!response.ok) {
throw new Error(`Request failed: ${response.status}`);
}
const result2 = await response.json();
console.log(result2);
// }
}
} catch (error) {
console.error('External login error:', error);
@@ -94,12 +90,8 @@ const gridOptions: VxeGridProps = {
proxyConfig: {
ajax: {
query: async ({ page }, formValues = {}) => {
// 修改添加对token的使用如果token存在则请求外部接口否则使用原接口
console.log(1243);
sessionStorage.removeItem('token');
await externalLoginOnLoad();
console.log(23423310248);
if (token.value) {
try {
const response = await fetch(
@@ -113,17 +105,6 @@ const gridOptions: VxeGridProps = {
Accept: 'application/json, text/plain, */*',
},
body: JSON.stringify({
// pageReq: {
// pageNum: page.currentPage,
// pageSize: page.pageSize,
// },
// parkStates: parkStates.value,
// parkOrderTypes: [100, 200, 201, 300, 500],
// plNos: ['PFN000000022', 'PFN000000012', 'PFN000000025'],
// terminalSource: 50,
// orderStates: [],
// orgId: 10012,
// ...formValues,
pageReq: {
pageNum: page.currentPage,
pageSize: page.pageSize,
@@ -135,19 +116,12 @@ const gridOptions: VxeGridProps = {
orderStates: [],
parkOrderTypes: [100, 200, 201, 300, 500],
terminalSource: 50,
// plNos、carNumber、orgId、orderStates、parkOrderTypes、terminalSource为接口参数固定需求
// parkStates10-在场、20-离场
}),
},
);
// if (!response.ok) {
// throw new Error(
// `External API request failed: ${response.status}`,
// );
// }
const result = await response.json();
console.log(result);
// 根据返回数据结构调整
return {
rows: result.data.dataList || [],

View File

@@ -76,7 +76,6 @@ const [BasicModal, modalApi] = useVbenModal({
for (const item of result.data) {
if (item.fileName.includes('进场图片')) {
data.parkInImgPath = item.filePath;
console.log('图片路径:', data.parkInImgPath);
} else {
data.parkOutImgPath = item.filePath;
}

View File

@@ -1,34 +1,19 @@
import type { FormSchemaGetter } from '#/adapter/form';
import type { VxeGridProps } from '#/adapter/vxe-table';
import { getDictOptions } from '#/utils/dict';
import { renderDict } from '#/utils/render';
import type { FormSchemaGetter } from '#/adapter/form'
import type { VxeGridProps } from '#/adapter/vxe-table'
import { getDictOptions } from '#/utils/dict'
import { renderDict } from '#/utils/render'
export const querySchema: FormSchemaGetter = () => [
// {
// component: 'Input',
// fieldName: 'actionTime',
// label: '通行时间',
// },
{
component: 'RangePicker',
fieldName: 'dateRange',
label: '通行时间',
},
{
component: 'Input',
fieldName: 'customerName',
label: '人员姓名',
},
// {
// component: 'Input',
// fieldName: 'organFullPath',
// label: '组织机构',
// },
// {
// component: 'Input',
// fieldName: 'doorName',
// label: '门/电梯名称',
// },
// {
// component: 'Input',
// fieldName: 'deviceName',
// label: '设备名称',
// },
{
component: 'Select',
componentProps: {
@@ -37,16 +22,15 @@ export const querySchema: FormSchemaGetter = () => [
fieldName: 'recordType',
label: '记录类型',
},
];
]
export const columns: VxeGridProps['columns'] = [
// { type: 'checkbox', width: 60 },
{
title: '序号',
field: 'id',
slots: {
default: ({ rowIndex }) => {
return (rowIndex + 1).toString();
return (rowIndex + 1).toString()
},
},
width: 60,
@@ -66,16 +50,11 @@ export const columns: VxeGridProps['columns'] = [
field: 'deviceType',
slots: {
default: ({ row }) => {
return renderDict(row.deviceType, 'wy_txjlsblb');
return renderDict(row.deviceType, 'wy_txjlsblb')
},
},
width: 150,
},
{
title: '读头名称',
field: 'readerName',
width: 100,
},
{
title: '人员姓名',
field: 'customerName',
@@ -84,14 +63,13 @@ export const columns: VxeGridProps['columns'] = [
{
title: '所属组织',
field: 'organFullPath',
width: 150,
},
{
title: '门卡类别',
field: 'cardType',
slots: {
default: ({ row }) => {
return renderDict(row.cardType, 'wy_txjlmklb');
return renderDict(row.cardType, 'wy_txjlmklb')
},
},
width: 100,
@@ -101,7 +79,7 @@ export const columns: VxeGridProps['columns'] = [
field: 'gatewayType',
slots: {
default: ({ row }) => {
return renderDict(row.gatewayType, 'wy_txjlcrlx');
return renderDict(row.gatewayType, 'wy_txjlcrlx')
},
},
width: 100,
@@ -116,7 +94,7 @@ export const columns: VxeGridProps['columns'] = [
field: 'recordType',
slots: {
default: ({ row }) => {
return renderDict(row.recordType, 'wy_txjllx');
return renderDict(row.recordType, 'wy_txjllx')
},
},
width: 100,
@@ -126,6 +104,6 @@ export const columns: VxeGridProps['columns'] = [
fixed: 'right',
slots: { default: 'action' },
title: '抓拍图片',
minWidth: 180,
width: 140,
},
];
]

View File

@@ -1,16 +1,14 @@
<script setup lang="ts">
import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
import { Space } from 'ant-design-vue';
import { useVbenVxeGrid, type VxeGridProps } from '#/adapter/vxe-table';
import { columns, querySchema } from './data';
import { getVisitorList } from '#/api/property/resident/passRecordManagement';
import recordDetailModal from './record-detail-modal.vue';
import { useVbenVxeGrid, type VxeGridProps } from '#/adapter/vxe-table';
import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
import { getVisitorList } from '#/api/property/resident/passRecordManagement';
const formOptions: VbenFormProps = {
commonConfig: {
labelWidth: 120,
labelWidth: 80,
componentProps: {
allowClear: true,
},
@@ -35,10 +33,14 @@ const gridOptions: VxeGridProps = {
proxyConfig: {
ajax: {
query: async ({ page }, formValues = {}) => {
console.log('query', page, formValues);
return await getVisitorList({
pageNum: page.currentPage,
pageSize: page.pageSize,
...formValues,
begTime: typeof formValues.dateRange === 'undefined' ? '' : formValues.dateRange[0],
endTime: typeof formValues.dateRange === 'undefined' ? '' : formValues.dateRange[1],
personName: typeof formValues.personName === 'undefined' ? '' : formValues.personName,
recordType: typeof formValues.recordType === 'undefined' ? '' : formValues.recordType,
});
},
},
@@ -55,16 +57,6 @@ const [BasicTable, tableApi] = useVbenVxeGrid({
gridOptions,
});
function handleDownloadExcel() {
// commonDownloadExcel(
// resident_unitExport,
// '入驻单位数据',
// tableApi.formApi.form.values,
// {
// fieldMappingTime: formOptions.fieldMappingTime,
// },
// );
}
const [RecordDetailModal, recordDetailModalApi] = useVbenModal({
connectedComponent: recordDetailModal,
});
@@ -77,13 +69,6 @@ async function handleInfo(row: any) {
<template>
<Page :auto-content-height="true">
<BasicTable table-title="通行记录列表">
<template #toolbar-tools>
<Space>
<a-button @click="handleDownloadExcel">
{{ $t('pages.common.export') }}
</a-button>
</Space>
</template>
<template #action="{ row }">
<Space>
<ghost-button @click.stop="handleInfo(row)"> 查看 </ghost-button>

View File

@@ -1,11 +1,13 @@
<script setup lang="ts">
import { ref } from 'vue';
import { Empty } from "ant-design-vue";
import { useVbenModal } from '@vben/common-ui';
const emit = defineEmits<{ reload: [] }>();
const picture1 = ref('')
const picture2 = ref('')
// const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
// {
// initializedGetter: defaultFormValueGetter(formApi),
@@ -23,22 +25,10 @@ const [BasicModal, modalApi] = useVbenModal({
if (!isOpen) {
return null;
}
const {data} = modalApi.getData() as { data:any };
console.log(data)
picture1.value = data.pictureUrl;
// detail.value = await meetInfo(id);
// if (detail.value?.picture) {
// const res = await ossInfo([conferenceSettingsDetail.value?.picture]);
// if (res) {
// let imgArr = [] as string[];
// res.forEach(item => {
// imgArr.push(item.url)
// })
// conferenceSettingsDetail.value.pictureArr = imgArr;
// }
// }
modalApi.modalLoading(true);
const {data} = modalApi.getData() as { data:any };
picture1.value = data.voucherUrl;
picture2.value = data.pictureUrl
modalApi.modalLoading(false);
},
});
@@ -54,7 +44,9 @@ async function handleConfirm() {
modalApi.lock(false);
}
}
async function handleClosed() {}
async function handleClosed() {
}
</script>
<template>
@@ -66,11 +58,12 @@ async function handleClosed() {}
<div class="detail-caption">人脸凭证照片</div>
</div>
<div class="detail-card">
<img class="detail-thumb" :src="picture1"></img>
<Empty class="detail-thumb" :image="Empty.PRESENTED_IMAGE_SIMPLE"
description="暂无数据" />
<div class="detail-caption">监控设备抓拍</div>
</div>
<div class="detail-card">
<img class="detail-thumb" :src="picture1"></img>
<img class="detail-thumb" :src="picture2"></img>
<div class="detail-caption">人脸门禁抓拍</div>
</div>
</div>
@@ -93,10 +86,6 @@ async function handleClosed() {}
display: flex;
flex-direction: column;
align-items: center;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.08);
padding: 16px;
}
.detail-thumb {

View File

@@ -2,11 +2,8 @@
<Page class="h-full w-full">
<!-- 设备分组区域 -->
<div class="flex h-full gap-[8px]">
<div class="h-full pb-[5px] c-tree bg-background">
<ChannelTree
class="w-[300px]"
@check="onNodeChecked"
/>
<div class="c-tree bg-background h-full pb-[5px]">
<ChannelTree class="w-[300px]" @check="onNodeChecked" />
</div>
<!-- 设备分组区域 -->
@@ -52,7 +49,7 @@ import { Page } from '@vben/common-ui';
import ChannelTree from './channel-tree.vue';
import mpegts from 'mpegts.js';
import { message } from 'ant-design-vue';
import { addFFmpegStreamProxy, addStreamProxy } from '#/api/sis/stream';
import { addStreamProxy } from '#/api/sis/stream';
import {
Svg16FrameIcon,
Svg1FrameIcon,
@@ -296,8 +293,8 @@ function streamProxy(nodeData: any, cb: Function) {
if (isSupportH265) {
addStreamProxy(params).then((res) => cb(res));
} else {
addFFmpegStreamProxy(params).then((res) => cb(res));
// addStreamProxy(params).then((res) => cb(res));
// addFFmpegStreamProxy(params).then((res) => cb(res));
addStreamProxy(params).then((res) => cb(res));
}
}
@@ -310,7 +307,8 @@ function doPlayer(nodeData: any, index: number = 0) {
console.log('index=', index);
if (mpegts.isSupported()) {
streamProxy(nodeData, (res: AddStreamProxyResult) => {
const url = res.wsFlv;
const host = window.location.host;
const url = `http://${host}/${res.app}/${res.streamId}.live.flv`;
// 将url 绑定到 nodeData
nodeData.url = url;
closePlayer(index);
@@ -337,7 +335,9 @@ function doPlayer(nodeData: any, index: number = 0) {
player.play();
playerList[index] = {
player,
key: nodeData.id,
data: nodeData,
el: videoElement,
};
} else {
console.log('视频播放元素获取异常');
@@ -381,12 +381,15 @@ function catchUp() {
if (playerData) {
const { player, el } = playerData;
const end = player.buffered.end(player.buffered.length - 1);
const { currentTime } = el;
if (end && currentTime) {
const diff = end - el.currentTime;
if (diff > 2) {
// 如果延迟超过2秒
el.currentTime = end - 0.5; // 跳转到接近直播点
}
}
}
});
}