master #2
2
apps/web-antd/src/api/sis/stream/model.d.ts
vendored
2
apps/web-antd/src/api/sis/stream/model.d.ts
vendored
@@ -1,5 +1,7 @@
|
|||||||
export interface AddStreamProxyResult {
|
export interface AddStreamProxyResult {
|
||||||
key:string;
|
key:string;
|
||||||
|
app:string;
|
||||||
|
streamId:string;
|
||||||
rtsp:string;
|
rtsp:string;
|
||||||
rtmp:string;
|
rtmp:string;
|
||||||
flv:string;
|
flv:string;
|
||||||
|
@@ -1,374 +1,262 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import * as echarts from "echarts";
|
import * as echarts from 'echarts';
|
||||||
import { onMounted, ref } from "vue";
|
import { onMounted, ref } from 'vue';
|
||||||
import type { Dayjs } from "dayjs";
|
import type { Dayjs } from 'dayjs';
|
||||||
import dayjs from "dayjs";
|
import dayjs from 'dayjs';
|
||||||
import { Page } from "@vben/common-ui";
|
import { Page } from '@vben/common-ui';
|
||||||
import { DatePicker } from "ant-design-vue";
|
import { DatePicker } from 'ant-design-vue';
|
||||||
import FloorTree from "../components/floor-tree.vue";
|
import FloorTree from '../components/floor-tree.vue';
|
||||||
import { meterRecordTrend } from "#/api/property/energyManagement/meterRecord";
|
import { meterRecordTrend } from '#/api/property/energyManagement/meterRecord';
|
||||||
|
|
||||||
const currentDay = ref<Dayjs>(dayjs());
|
const currentDay = ref<Dayjs>(dayjs());
|
||||||
const currentMonth = ref<Dayjs>(dayjs());
|
const currentMonth = ref<Dayjs>(dayjs());
|
||||||
const currentYear = ref<Dayjs>(dayjs());
|
const currentYear = ref<Dayjs>(dayjs());
|
||||||
const disabledDay = (current: Dayjs) => {
|
const disabledDay = (current: Dayjs) => {
|
||||||
return current && current > dayjs().endOf("day");
|
return current && current > dayjs().endOf('day');
|
||||||
};
|
};
|
||||||
const disabledMonth = (current: Dayjs) => {
|
const disabledMonth = (current: Dayjs) => {
|
||||||
return current && current > dayjs().endOf("month");
|
return current && current > dayjs().endOf('month');
|
||||||
};
|
};
|
||||||
const disabledYear = (current: Dayjs) => {
|
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(() => {
|
onMounted(() => {
|
||||||
//day
|
//day
|
||||||
const chartDay = document.getElementById("day");
|
const chartDay = document.getElementById('day');
|
||||||
const myChartDay = echarts.init(chartDay);
|
chartInstances.value.day = echarts.init(chartDay);
|
||||||
const optionDay = {
|
const optionDay = {
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: "axis",
|
trigger: 'axis',
|
||||||
},
|
},
|
||||||
legend: {
|
legend: {
|
||||||
data: ["当日", "昨日"],
|
data: ['当日', '昨日'],
|
||||||
},
|
},
|
||||||
toolbox: {
|
toolbox: {
|
||||||
show: true,
|
show: true,
|
||||||
feature: {
|
feature: {
|
||||||
magicType: { show: true, type: ["line", "bar"] },
|
magicType: { show: true, type: ['line', 'bar'] },
|
||||||
restore: { show: true },
|
restore: { show: true },
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
calculable: true,
|
calculable: true,
|
||||||
xAxis: [
|
xAxis: [
|
||||||
{
|
{
|
||||||
type: "category",
|
type: 'category',
|
||||||
name: "时",
|
name: '时',
|
||||||
data: [
|
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",
|
|
||||||
],
|
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
yAxis: [
|
yAxis: [
|
||||||
{
|
{
|
||||||
type: "value",
|
type: 'value',
|
||||||
name: "KW.h",
|
name: 'KW.h',
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
name: "当日",
|
name: '当日',
|
||||||
type: "bar",
|
type: 'bar',
|
||||||
data: [
|
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,
|
|
||||||
],
|
|
||||||
markPoint: {
|
markPoint: {
|
||||||
data: [
|
data: [
|
||||||
{ type: "max", name: "Max" },
|
{ type: 'max', name: 'Max' },
|
||||||
{ type: "min", name: "Min" },
|
{ 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" },
|
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
dataZoom: [
|
dataZoom: [
|
||||||
{
|
{
|
||||||
type: "inside",
|
type: 'inside',
|
||||||
xAxisIndex: 0,
|
xAxisIndex: 0,
|
||||||
zoomOnMouseWheel: true,
|
zoomOnMouseWheel: true,
|
||||||
filterMode: "filter",
|
filterMode: 'filter',
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
optionDay && myChartDay.setOption(optionDay);
|
optionDay && chartInstances.value.day.setOption(optionDay);
|
||||||
|
|
||||||
//month
|
//month
|
||||||
const chartMonth = document.getElementById("month");
|
const chartMonth = document.getElementById('month');
|
||||||
const myChartMonth = echarts.init(chartMonth);
|
chartInstances.value.month = echarts.init(chartMonth);
|
||||||
const optionMonth = {
|
const optionMonth = {
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: "axis",
|
trigger: 'axis',
|
||||||
},
|
},
|
||||||
legend: {
|
legend: {
|
||||||
data: ["当月", "上月"],
|
data: ['当月', '上月'],
|
||||||
},
|
},
|
||||||
toolbox: {
|
toolbox: {
|
||||||
show: true,
|
show: true,
|
||||||
feature: {
|
feature: {
|
||||||
magicType: { show: true, type: ["line", "bar"] },
|
magicType: { show: true, type: ['line', 'bar'] },
|
||||||
restore: { show: true },
|
restore: { show: true },
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
calculable: true,
|
calculable: true,
|
||||||
xAxis: [
|
xAxis: [
|
||||||
{
|
{
|
||||||
type: "category",
|
type: 'category',
|
||||||
name: "日",
|
name: '日',
|
||||||
data: [
|
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",
|
|
||||||
],
|
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
yAxis: [
|
yAxis: [
|
||||||
{
|
{
|
||||||
type: "value",
|
type: 'value',
|
||||||
name: "KW.h",
|
name: 'KW.h',
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
name: "当月",
|
name: '当月',
|
||||||
type: "bar",
|
type: 'bar',
|
||||||
data: [
|
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,
|
|
||||||
],
|
|
||||||
markPoint: {
|
markPoint: {
|
||||||
data: [
|
data: [
|
||||||
{ type: "max", name: "Max" },
|
{ type: 'max', name: 'Max' },
|
||||||
{ type: "min", name: "Min" },
|
{ 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" },
|
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
dataZoom: [
|
dataZoom: [
|
||||||
{
|
{
|
||||||
type: "inside",
|
type: 'inside',
|
||||||
xAxisIndex: 0,
|
xAxisIndex: 0,
|
||||||
zoomOnMouseWheel: true,
|
zoomOnMouseWheel: true,
|
||||||
filterMode: "filter",
|
filterMode: 'filter',
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
optionMonth && myChartMonth.setOption(optionMonth);
|
optionMonth && chartInstances.value.month.setOption(optionMonth);
|
||||||
|
|
||||||
//year
|
//year
|
||||||
const chartYear = document.getElementById("year");
|
const chartYear = document.getElementById('year');
|
||||||
const myChartYear = echarts.init(chartYear);
|
chartInstances.value.year = echarts.init(chartYear);
|
||||||
const optionYear = {
|
const optionYear = {
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: "axis",
|
trigger: 'axis',
|
||||||
},
|
},
|
||||||
legend: {
|
legend: {
|
||||||
data: ["当年", "去年"],
|
data: ['当年', '去年'],
|
||||||
},
|
},
|
||||||
toolbox: {
|
toolbox: {
|
||||||
show: true,
|
show: true,
|
||||||
feature: {
|
feature: {
|
||||||
magicType: { show: true, type: ["line", "bar"] },
|
magicType: { show: true, type: ['line', 'bar'] },
|
||||||
restore: { show: true },
|
restore: { show: true },
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
calculable: true,
|
calculable: true,
|
||||||
xAxis: [
|
xAxis: [
|
||||||
{
|
{
|
||||||
type: "category",
|
type: 'category',
|
||||||
name: "月",
|
name: '月',
|
||||||
data: [
|
data: [],
|
||||||
"01",
|
|
||||||
"02",
|
|
||||||
"03",
|
|
||||||
"04",
|
|
||||||
"05",
|
|
||||||
"06",
|
|
||||||
"07",
|
|
||||||
"08",
|
|
||||||
"09",
|
|
||||||
"10",
|
|
||||||
"11",
|
|
||||||
"12",
|
|
||||||
],
|
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
yAxis: [
|
yAxis: [
|
||||||
{
|
{
|
||||||
type: "value",
|
type: 'value',
|
||||||
name: "KW.h",
|
name: 'KW.h',
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
name: "当年",
|
name: '当年',
|
||||||
type: "bar",
|
type: 'bar',
|
||||||
data: [
|
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,
|
|
||||||
],
|
|
||||||
markPoint: {
|
markPoint: {
|
||||||
data: [
|
data: [
|
||||||
{ type: "max", name: "Max" },
|
{ type: 'max', name: 'Max' },
|
||||||
{ type: "min", name: "Min" },
|
{ 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" },
|
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
dataZoom: [
|
dataZoom: [
|
||||||
{
|
{
|
||||||
type: "inside",
|
type: 'inside',
|
||||||
xAxisIndex: 0,
|
xAxisIndex: 0,
|
||||||
zoomOnMouseWheel: true,
|
zoomOnMouseWheel: true,
|
||||||
filterMode: "filter",
|
filterMode: 'filter',
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
optionYear && myChartYear.setOption(optionYear);
|
optionYear && chartInstances.value.year.setOption(optionYear);
|
||||||
|
|
||||||
// 鼠标悬停时激活缩放
|
// 鼠标悬停时激活缩放
|
||||||
myChartDay.on("mouseover", { seriesIndex: 0 }, () => {
|
chartInstances.value.day.on('mouseover', { seriesIndex: 0 }, () => {
|
||||||
myChartDay.dispatchAction({
|
chartInstances.value.day.dispatchAction({
|
||||||
type: "takeGlobalCursor",
|
type: 'takeGlobalCursor',
|
||||||
key: "dataZoomSelect",
|
key: 'dataZoomSelect',
|
||||||
dataZoomSelectActive: true,
|
dataZoomSelectActive: true,
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
// 鼠标离开时取消缩放
|
// 鼠标离开时取消缩放
|
||||||
myChartDay.on("mouseout", { seriesIndex: 0 }, () => {
|
chartInstances.value.day.on('mouseout', { seriesIndex: 0 }, () => {
|
||||||
myChartDay.dispatchAction({
|
chartInstances.value.day.dispatchAction({
|
||||||
type: "takeGlobalCursor",
|
type: 'takeGlobalCursor',
|
||||||
key: "dataZoomSelect",
|
key: 'dataZoomSelect',
|
||||||
dataZoomSelectActive: false,
|
dataZoomSelectActive: false,
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
// 鼠标悬停时激活缩放
|
// 鼠标悬停时激活缩放
|
||||||
myChartYear.on("mouseover", { seriesIndex: 0 }, () => {
|
chartInstances.value.year.on('mouseover', { seriesIndex: 0 }, () => {
|
||||||
myChartYear.dispatchAction({
|
chartInstances.value.year.dispatchAction({
|
||||||
type: "takeGlobalCursor",
|
type: 'takeGlobalCursor',
|
||||||
key: "dataZoomSelect",
|
key: 'dataZoomSelect',
|
||||||
dataZoomSelectActive: true,
|
dataZoomSelectActive: true,
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
// 鼠标离开时取消缩放
|
// 鼠标离开时取消缩放
|
||||||
myChartYear.on("mouseout", { seriesIndex: 0 }, () => {
|
chartInstances.value.year.on('mouseout', { seriesIndex: 0 }, () => {
|
||||||
myChartYear.dispatchAction({
|
chartInstances.value.year.dispatchAction({
|
||||||
type: "takeGlobalCursor",
|
type: 'takeGlobalCursor',
|
||||||
key: "dataZoomSelect",
|
key: 'dataZoomSelect',
|
||||||
dataZoomSelectActive: false,
|
dataZoomSelectActive: false,
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
// 鼠标悬停时激活缩放
|
// 鼠标悬停时激活缩放
|
||||||
myChartMonth.on("mouseover", { seriesIndex: 0 }, () => {
|
chartInstances.value.month.on('mouseover', { seriesIndex: 0 }, () => {
|
||||||
myChartMonth.dispatchAction({
|
chartInstances.value.month.dispatchAction({
|
||||||
type: "takeGlobalCursor",
|
type: 'takeGlobalCursor',
|
||||||
key: "dataZoomSelect",
|
key: 'dataZoomSelect',
|
||||||
dataZoomSelectActive: true,
|
dataZoomSelectActive: true,
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
// 鼠标离开时取消缩放
|
// 鼠标离开时取消缩放
|
||||||
myChartMonth.on("mouseout", { seriesIndex: 0 }, () => {
|
chartInstances.value.month.on('mouseout', { seriesIndex: 0 }, () => {
|
||||||
myChartMonth.dispatchAction({
|
chartInstances.value.month.dispatchAction({
|
||||||
type: "takeGlobalCursor",
|
type: 'takeGlobalCursor',
|
||||||
key: "dataZoomSelect",
|
key: 'dataZoomSelect',
|
||||||
dataZoomSelectActive: false,
|
dataZoomSelectActive: false,
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
function handleSelectFloor(selectedKeys, info) {
|
const trendData = ref<any>({});
|
||||||
|
async function handleSelectFloor(selectedKeys, info) {
|
||||||
let data = {
|
let data = {
|
||||||
day: currentDay.value.format("YYYY-MM-DD"),
|
day: currentDay.value.format('YYYY-MM-DD'),
|
||||||
month: currentMonth.value.format("YYYY-MM"),
|
month: currentMonth.value.format('YYYY-MM'),
|
||||||
year: currentYear.value.format("YYYY"),
|
year: currentYear.value.format('YYYY'),
|
||||||
meterType: 1,
|
meterType: 1,
|
||||||
|
meterId: null,
|
||||||
|
floorId: null,
|
||||||
};
|
};
|
||||||
|
|
||||||
if (info.node.level == 3) {
|
if (info.node.level == 3) {
|
||||||
@@ -377,47 +265,117 @@ function handleSelectFloor(selectedKeys, info) {
|
|||||||
data.meterId = selectedKeys[0];
|
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>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<Page :auto-content-height="true">
|
<Page :auto-content-height="true">
|
||||||
<div class="flex h-full gap-[8px]">
|
<div class="flex h-full gap-[8px]">
|
||||||
<FloorTree class="w-[260px]"
|
<FloorTree class="w-[260px]" @select="handleSelectFloor"></FloorTree>
|
||||||
@select="handleSelectFloor"></FloorTree>
|
<div class="flex-1 overflow-hidden">
|
||||||
<div class=" flex-1 overflow-hidden">
|
<div
|
||||||
<div style="background: #fff;border-radius: 8px;padding: 10px;height: 33%">
|
style="
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 10px;
|
||||||
|
height: 33%;
|
||||||
|
"
|
||||||
|
>
|
||||||
<div>
|
<div>
|
||||||
<div style="display: flex;justify-content: space-between;">
|
<div style="display: flex; justify-content: space-between">
|
||||||
<DatePicker v-model:value="currentDay"
|
<DatePicker
|
||||||
:disabled-date="disabledDay" />当日能耗总值:125.04KW.h
|
v-model:value="currentDay"
|
||||||
|
:disabled-date="disabledDay"
|
||||||
|
/>当日能耗总值:125.04KW.h
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="day"
|
<div id="day" style="height: 100%; width: 100%"></div>
|
||||||
style="height: 100%;width: 100%;"></div>
|
|
||||||
</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>
|
||||||
<div style="display: flex;justify-content: space-between;">
|
<div style="display: flex; justify-content: space-between">
|
||||||
<DatePicker v-model:value="currentMonth"
|
<DatePicker
|
||||||
:disabled-date="disabledMonth"
|
v-model:value="currentMonth"
|
||||||
picker="month" />当月能耗总值:125.04KW.h
|
:disabled-date="disabledMonth"
|
||||||
|
picker="month"
|
||||||
|
/>当月能耗总值:125.04KW.h
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="month"
|
<div id="month" style="height: 100%; width: 100%"></div>
|
||||||
style="height: 100%;width: 100%;"></div>
|
|
||||||
</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>
|
||||||
<div style="display: flex;justify-content: space-between;">
|
<div style="display: flex; justify-content: space-between">
|
||||||
<DatePicker v-model:value="currentYear"
|
<DatePicker
|
||||||
:disabled-date="disabledYear"
|
v-model:value="currentYear"
|
||||||
picker="year" />当年能耗总值:125.04KW.h
|
:disabled-date="disabledYear"
|
||||||
|
picker="year"
|
||||||
|
/>当年能耗总值:125.04KW.h
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="year"
|
<div id="year" style="height: 100%; width: 100%"></div>
|
||||||
style="height: 100%;width: 100%;"></div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@@ -1,8 +1,8 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref } from 'vue';
|
import { ref } from 'vue';
|
||||||
import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
|
import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
|
||||||
|
|
||||||
import { Space } from 'ant-design-vue';
|
import { Space } from 'ant-design-vue';
|
||||||
|
|
||||||
import { useVbenVxeGrid, type VxeGridProps } from '#/adapter/vxe-table';
|
import { useVbenVxeGrid, type VxeGridProps } from '#/adapter/vxe-table';
|
||||||
|
|
||||||
@@ -57,10 +57,6 @@ async function externalLoginOnLoad() {
|
|||||||
if (!response.ok) {
|
if (!response.ok) {
|
||||||
throw new Error(`Request failed: ${response.status}`);
|
throw new Error(`Request failed: ${response.status}`);
|
||||||
}
|
}
|
||||||
|
|
||||||
const result2 = await response.json();
|
|
||||||
console.log(result2);
|
|
||||||
// }
|
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('External login error:', error);
|
console.error('External login error:', error);
|
||||||
@@ -94,12 +90,8 @@ const gridOptions: VxeGridProps = {
|
|||||||
proxyConfig: {
|
proxyConfig: {
|
||||||
ajax: {
|
ajax: {
|
||||||
query: async ({ page }, formValues = {}) => {
|
query: async ({ page }, formValues = {}) => {
|
||||||
// 修改:添加对token的使用,如果token存在则请求外部接口,否则使用原接口
|
|
||||||
console.log(1243);
|
|
||||||
sessionStorage.removeItem('token');
|
sessionStorage.removeItem('token');
|
||||||
await externalLoginOnLoad();
|
await externalLoginOnLoad();
|
||||||
console.log(23423310248);
|
|
||||||
|
|
||||||
if (token.value) {
|
if (token.value) {
|
||||||
try {
|
try {
|
||||||
const response = await fetch(
|
const response = await fetch(
|
||||||
@@ -113,17 +105,6 @@ const gridOptions: VxeGridProps = {
|
|||||||
Accept: 'application/json, text/plain, */*',
|
Accept: 'application/json, text/plain, */*',
|
||||||
},
|
},
|
||||||
body: JSON.stringify({
|
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: {
|
pageReq: {
|
||||||
pageNum: page.currentPage,
|
pageNum: page.currentPage,
|
||||||
pageSize: page.pageSize,
|
pageSize: page.pageSize,
|
||||||
@@ -135,19 +116,12 @@ const gridOptions: VxeGridProps = {
|
|||||||
orderStates: [],
|
orderStates: [],
|
||||||
parkOrderTypes: [100, 200, 201, 300, 500],
|
parkOrderTypes: [100, 200, 201, 300, 500],
|
||||||
terminalSource: 50,
|
terminalSource: 50,
|
||||||
|
// plNos、carNumber、orgId、orderStates、parkOrderTypes、terminalSource为接口参数固定需求
|
||||||
|
// parkStates:10-在场、20-离场
|
||||||
}),
|
}),
|
||||||
},
|
},
|
||||||
);
|
);
|
||||||
|
|
||||||
// if (!response.ok) {
|
|
||||||
// throw new Error(
|
|
||||||
// `External API request failed: ${response.status}`,
|
|
||||||
// );
|
|
||||||
// }
|
|
||||||
|
|
||||||
const result = await response.json();
|
const result = await response.json();
|
||||||
console.log(result);
|
|
||||||
|
|
||||||
// 根据返回数据结构调整
|
// 根据返回数据结构调整
|
||||||
return {
|
return {
|
||||||
rows: result.data.dataList || [],
|
rows: result.data.dataList || [],
|
||||||
|
@@ -76,7 +76,6 @@ const [BasicModal, modalApi] = useVbenModal({
|
|||||||
for (const item of result.data) {
|
for (const item of result.data) {
|
||||||
if (item.fileName.includes('进场图片')) {
|
if (item.fileName.includes('进场图片')) {
|
||||||
data.parkInImgPath = item.filePath;
|
data.parkInImgPath = item.filePath;
|
||||||
console.log('图片路径:', data.parkInImgPath);
|
|
||||||
} else {
|
} else {
|
||||||
data.parkOutImgPath = item.filePath;
|
data.parkOutImgPath = item.filePath;
|
||||||
}
|
}
|
||||||
|
@@ -1,34 +1,19 @@
|
|||||||
import type { FormSchemaGetter } from '#/adapter/form';
|
import type { FormSchemaGetter } from '#/adapter/form'
|
||||||
import type { VxeGridProps } from '#/adapter/vxe-table';
|
import type { VxeGridProps } from '#/adapter/vxe-table'
|
||||||
import { getDictOptions } from '#/utils/dict';
|
import { getDictOptions } from '#/utils/dict'
|
||||||
import { renderDict } from '#/utils/render';
|
import { renderDict } from '#/utils/render'
|
||||||
|
|
||||||
export const querySchema: FormSchemaGetter = () => [
|
export const querySchema: FormSchemaGetter = () => [
|
||||||
// {
|
{
|
||||||
// component: 'Input',
|
component: 'RangePicker',
|
||||||
// fieldName: 'actionTime',
|
fieldName: 'dateRange',
|
||||||
// label: '通行时间',
|
label: '通行时间',
|
||||||
// },
|
},
|
||||||
{
|
{
|
||||||
component: 'Input',
|
component: 'Input',
|
||||||
fieldName: 'customerName',
|
fieldName: 'customerName',
|
||||||
label: '人员姓名',
|
label: '人员姓名',
|
||||||
},
|
},
|
||||||
// {
|
|
||||||
// component: 'Input',
|
|
||||||
// fieldName: 'organFullPath',
|
|
||||||
// label: '组织机构',
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// component: 'Input',
|
|
||||||
// fieldName: 'doorName',
|
|
||||||
// label: '门/电梯名称',
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// component: 'Input',
|
|
||||||
// fieldName: 'deviceName',
|
|
||||||
// label: '设备名称',
|
|
||||||
// },
|
|
||||||
{
|
{
|
||||||
component: 'Select',
|
component: 'Select',
|
||||||
componentProps: {
|
componentProps: {
|
||||||
@@ -37,16 +22,15 @@ export const querySchema: FormSchemaGetter = () => [
|
|||||||
fieldName: 'recordType',
|
fieldName: 'recordType',
|
||||||
label: '记录类型',
|
label: '记录类型',
|
||||||
},
|
},
|
||||||
];
|
]
|
||||||
|
|
||||||
export const columns: VxeGridProps['columns'] = [
|
export const columns: VxeGridProps['columns'] = [
|
||||||
// { type: 'checkbox', width: 60 },
|
|
||||||
{
|
{
|
||||||
title: '序号',
|
title: '序号',
|
||||||
field: 'id',
|
field: 'id',
|
||||||
slots: {
|
slots: {
|
||||||
default: ({ rowIndex }) => {
|
default: ({ rowIndex }) => {
|
||||||
return (rowIndex + 1).toString();
|
return (rowIndex + 1).toString()
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
width: 60,
|
width: 60,
|
||||||
@@ -66,16 +50,11 @@ export const columns: VxeGridProps['columns'] = [
|
|||||||
field: 'deviceType',
|
field: 'deviceType',
|
||||||
slots: {
|
slots: {
|
||||||
default: ({ row }) => {
|
default: ({ row }) => {
|
||||||
return renderDict(row.deviceType, 'wy_txjlsblb');
|
return renderDict(row.deviceType, 'wy_txjlsblb')
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
width: 150,
|
width: 150,
|
||||||
},
|
},
|
||||||
{
|
|
||||||
title: '读头名称',
|
|
||||||
field: 'readerName',
|
|
||||||
width: 100,
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
title: '人员姓名',
|
title: '人员姓名',
|
||||||
field: 'customerName',
|
field: 'customerName',
|
||||||
@@ -84,14 +63,13 @@ export const columns: VxeGridProps['columns'] = [
|
|||||||
{
|
{
|
||||||
title: '所属组织',
|
title: '所属组织',
|
||||||
field: 'organFullPath',
|
field: 'organFullPath',
|
||||||
width: 150,
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '门卡类别',
|
title: '门卡类别',
|
||||||
field: 'cardType',
|
field: 'cardType',
|
||||||
slots: {
|
slots: {
|
||||||
default: ({ row }) => {
|
default: ({ row }) => {
|
||||||
return renderDict(row.cardType, 'wy_txjlmklb');
|
return renderDict(row.cardType, 'wy_txjlmklb')
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
width: 100,
|
width: 100,
|
||||||
@@ -101,7 +79,7 @@ export const columns: VxeGridProps['columns'] = [
|
|||||||
field: 'gatewayType',
|
field: 'gatewayType',
|
||||||
slots: {
|
slots: {
|
||||||
default: ({ row }) => {
|
default: ({ row }) => {
|
||||||
return renderDict(row.gatewayType, 'wy_txjlcrlx');
|
return renderDict(row.gatewayType, 'wy_txjlcrlx')
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
width: 100,
|
width: 100,
|
||||||
@@ -116,7 +94,7 @@ export const columns: VxeGridProps['columns'] = [
|
|||||||
field: 'recordType',
|
field: 'recordType',
|
||||||
slots: {
|
slots: {
|
||||||
default: ({ row }) => {
|
default: ({ row }) => {
|
||||||
return renderDict(row.recordType, 'wy_txjllx');
|
return renderDict(row.recordType, 'wy_txjllx')
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
width: 100,
|
width: 100,
|
||||||
@@ -126,6 +104,6 @@ export const columns: VxeGridProps['columns'] = [
|
|||||||
fixed: 'right',
|
fixed: 'right',
|
||||||
slots: { default: 'action' },
|
slots: { default: 'action' },
|
||||||
title: '抓拍图片',
|
title: '抓拍图片',
|
||||||
minWidth: 180,
|
width: 140,
|
||||||
},
|
},
|
||||||
];
|
]
|
||||||
|
@@ -1,16 +1,14 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
|
|
||||||
|
|
||||||
import { Space } from 'ant-design-vue';
|
import { Space } from 'ant-design-vue';
|
||||||
|
|
||||||
import { useVbenVxeGrid, type VxeGridProps } from '#/adapter/vxe-table';
|
|
||||||
|
|
||||||
import { columns, querySchema } from './data';
|
import { columns, querySchema } from './data';
|
||||||
import { getVisitorList } from '#/api/property/resident/passRecordManagement';
|
|
||||||
import recordDetailModal from './record-detail-modal.vue';
|
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 = {
|
const formOptions: VbenFormProps = {
|
||||||
commonConfig: {
|
commonConfig: {
|
||||||
labelWidth: 120,
|
labelWidth: 80,
|
||||||
componentProps: {
|
componentProps: {
|
||||||
allowClear: true,
|
allowClear: true,
|
||||||
},
|
},
|
||||||
@@ -35,10 +33,14 @@ const gridOptions: VxeGridProps = {
|
|||||||
proxyConfig: {
|
proxyConfig: {
|
||||||
ajax: {
|
ajax: {
|
||||||
query: async ({ page }, formValues = {}) => {
|
query: async ({ page }, formValues = {}) => {
|
||||||
|
console.log('query', page, formValues);
|
||||||
return await getVisitorList({
|
return await getVisitorList({
|
||||||
pageNum: page.currentPage,
|
pageNum: page.currentPage,
|
||||||
pageSize: page.pageSize,
|
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,
|
gridOptions,
|
||||||
});
|
});
|
||||||
|
|
||||||
function handleDownloadExcel() {
|
|
||||||
// commonDownloadExcel(
|
|
||||||
// resident_unitExport,
|
|
||||||
// '入驻单位数据',
|
|
||||||
// tableApi.formApi.form.values,
|
|
||||||
// {
|
|
||||||
// fieldMappingTime: formOptions.fieldMappingTime,
|
|
||||||
// },
|
|
||||||
// );
|
|
||||||
}
|
|
||||||
const [RecordDetailModal, recordDetailModalApi] = useVbenModal({
|
const [RecordDetailModal, recordDetailModalApi] = useVbenModal({
|
||||||
connectedComponent: recordDetailModal,
|
connectedComponent: recordDetailModal,
|
||||||
});
|
});
|
||||||
@@ -77,13 +69,6 @@ async function handleInfo(row: any) {
|
|||||||
<template>
|
<template>
|
||||||
<Page :auto-content-height="true">
|
<Page :auto-content-height="true">
|
||||||
<BasicTable table-title="通行记录列表">
|
<BasicTable table-title="通行记录列表">
|
||||||
<template #toolbar-tools>
|
|
||||||
<Space>
|
|
||||||
<a-button @click="handleDownloadExcel">
|
|
||||||
{{ $t('pages.common.export') }}
|
|
||||||
</a-button>
|
|
||||||
</Space>
|
|
||||||
</template>
|
|
||||||
<template #action="{ row }">
|
<template #action="{ row }">
|
||||||
<Space>
|
<Space>
|
||||||
<ghost-button @click.stop="handleInfo(row)"> 查看 </ghost-button>
|
<ghost-button @click.stop="handleInfo(row)"> 查看 </ghost-button>
|
||||||
|
@@ -1,11 +1,13 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref } from 'vue';
|
import { ref } from 'vue';
|
||||||
|
import { Empty } from "ant-design-vue";
|
||||||
import { useVbenModal } from '@vben/common-ui';
|
import { useVbenModal } from '@vben/common-ui';
|
||||||
|
|
||||||
|
|
||||||
const emit = defineEmits<{ reload: [] }>();
|
const emit = defineEmits<{ reload: [] }>();
|
||||||
|
|
||||||
const picture1 = ref('')
|
const picture1 = ref('')
|
||||||
|
const picture2 = ref('')
|
||||||
// const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
|
// const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
|
||||||
// {
|
// {
|
||||||
// initializedGetter: defaultFormValueGetter(formApi),
|
// initializedGetter: defaultFormValueGetter(formApi),
|
||||||
@@ -23,22 +25,10 @@ const [BasicModal, modalApi] = useVbenModal({
|
|||||||
if (!isOpen) {
|
if (!isOpen) {
|
||||||
return null;
|
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);
|
modalApi.modalLoading(true);
|
||||||
|
const {data} = modalApi.getData() as { data:any };
|
||||||
|
picture1.value = data.voucherUrl;
|
||||||
|
picture2.value = data.pictureUrl
|
||||||
modalApi.modalLoading(false);
|
modalApi.modalLoading(false);
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
@@ -54,7 +44,9 @@ async function handleConfirm() {
|
|||||||
modalApi.lock(false);
|
modalApi.lock(false);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
async function handleClosed() {}
|
async function handleClosed() {
|
||||||
|
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
@@ -66,11 +58,12 @@ async function handleClosed() {}
|
|||||||
<div class="detail-caption">人脸凭证照片</div>
|
<div class="detail-caption">人脸凭证照片</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail-card">
|
<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 class="detail-caption">监控设备抓拍</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail-card">
|
<div class="detail-card">
|
||||||
<img class="detail-thumb" :src="picture1"></img>
|
<img class="detail-thumb" :src="picture2"></img>
|
||||||
<div class="detail-caption">人脸门禁抓拍</div>
|
<div class="detail-caption">人脸门禁抓拍</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -93,10 +86,6 @@ async function handleClosed() {}
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
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 {
|
.detail-thumb {
|
||||||
|
@@ -2,11 +2,8 @@
|
|||||||
<Page class="h-full w-full">
|
<Page class="h-full w-full">
|
||||||
<!-- 设备分组区域 -->
|
<!-- 设备分组区域 -->
|
||||||
<div class="flex h-full gap-[8px]">
|
<div class="flex h-full gap-[8px]">
|
||||||
<div class="h-full pb-[5px] c-tree bg-background">
|
<div class="c-tree bg-background h-full pb-[5px]">
|
||||||
<ChannelTree
|
<ChannelTree class="w-[300px]" @check="onNodeChecked" />
|
||||||
class="w-[300px]"
|
|
||||||
@check="onNodeChecked"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 设备分组区域 -->
|
<!-- 设备分组区域 -->
|
||||||
@@ -52,7 +49,7 @@ import { Page } from '@vben/common-ui';
|
|||||||
import ChannelTree from './channel-tree.vue';
|
import ChannelTree from './channel-tree.vue';
|
||||||
import mpegts from 'mpegts.js';
|
import mpegts from 'mpegts.js';
|
||||||
import { message } from 'ant-design-vue';
|
import { message } from 'ant-design-vue';
|
||||||
import { addFFmpegStreamProxy, addStreamProxy } from '#/api/sis/stream';
|
import { addStreamProxy } from '#/api/sis/stream';
|
||||||
import {
|
import {
|
||||||
Svg16FrameIcon,
|
Svg16FrameIcon,
|
||||||
Svg1FrameIcon,
|
Svg1FrameIcon,
|
||||||
@@ -296,8 +293,8 @@ function streamProxy(nodeData: any, cb: Function) {
|
|||||||
if (isSupportH265) {
|
if (isSupportH265) {
|
||||||
addStreamProxy(params).then((res) => cb(res));
|
addStreamProxy(params).then((res) => cb(res));
|
||||||
} else {
|
} else {
|
||||||
addFFmpegStreamProxy(params).then((res) => cb(res));
|
// addFFmpegStreamProxy(params).then((res) => cb(res));
|
||||||
// addStreamProxy(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);
|
console.log('index=', index);
|
||||||
if (mpegts.isSupported()) {
|
if (mpegts.isSupported()) {
|
||||||
streamProxy(nodeData, (res: AddStreamProxyResult) => {
|
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
|
// 将url 绑定到 nodeData
|
||||||
nodeData.url = url;
|
nodeData.url = url;
|
||||||
closePlayer(index);
|
closePlayer(index);
|
||||||
@@ -337,7 +335,9 @@ function doPlayer(nodeData: any, index: number = 0) {
|
|||||||
player.play();
|
player.play();
|
||||||
playerList[index] = {
|
playerList[index] = {
|
||||||
player,
|
player,
|
||||||
|
key: nodeData.id,
|
||||||
data: nodeData,
|
data: nodeData,
|
||||||
|
el: videoElement,
|
||||||
};
|
};
|
||||||
} else {
|
} else {
|
||||||
console.log('视频播放元素获取异常');
|
console.log('视频播放元素获取异常');
|
||||||
@@ -381,10 +381,13 @@ function catchUp() {
|
|||||||
if (playerData) {
|
if (playerData) {
|
||||||
const { player, el } = playerData;
|
const { player, el } = playerData;
|
||||||
const end = player.buffered.end(player.buffered.length - 1);
|
const end = player.buffered.end(player.buffered.length - 1);
|
||||||
const diff = end - el.currentTime;
|
const { currentTime } = el;
|
||||||
if (diff > 2) {
|
if (end && currentTime) {
|
||||||
// 如果延迟超过2秒
|
const diff = end - el.currentTime;
|
||||||
el.currentTime = end - 0.5; // 跳转到接近直播点
|
if (diff > 2) {
|
||||||
|
// 如果延迟超过2秒
|
||||||
|
el.currentTime = end - 0.5; // 跳转到接近直播点
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
Reference in New Issue
Block a user