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 {
|
||||
key:string;
|
||||
app:string;
|
||||
streamId:string;
|
||||
rtsp:string;
|
||||
rtmp:string;
|
||||
flv:string;
|
||||
|
@@ -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>
|
||||
<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
|
||||
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>
|
||||
|
@@ -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为接口参数固定需求
|
||||
// parkStates:10-在场、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 || [],
|
||||
|
@@ -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;
|
||||
}
|
||||
|
@@ -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,
|
||||
},
|
||||
];
|
||||
]
|
||||
|
@@ -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>
|
||||
|
@@ -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 {
|
||||
|
@@ -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; // 跳转到接近直播点
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
Reference in New Issue
Block a user