Merge pull request 'master' (#3) from master into prod
Some checks failed
/ Explore-Gitea-Actions (push) Failing after 19m57s
Some checks failed
/ Explore-Gitea-Actions (push) Failing after 19m57s
Reviewed-on: #3
This commit is contained in:
@@ -24,7 +24,9 @@ jobs:
|
|||||||
run: git config --global url."https://".insteadOf git://
|
run: git config --global url."https://".insteadOf git://
|
||||||
|
|
||||||
- name: 安装依赖
|
- name: 安装依赖
|
||||||
run: pnpm install
|
run: |
|
||||||
|
git config --global url."https://".insteadOf git://
|
||||||
|
pnpm install
|
||||||
continue-on-error: false # 依赖安装失败则终止工作流
|
continue-on-error: false # 依赖安装失败则终止工作流
|
||||||
|
|
||||||
- name: 构建项目
|
- name: 构建项目
|
||||||
|
@@ -328,6 +328,9 @@ export const workforceDayDetailColumns: VxeGridProps['columns'] = [
|
|||||||
width: 'auto',
|
width: 'auto',
|
||||||
slots: {
|
slots: {
|
||||||
default: ({ row }) => {
|
default: ({ row }) => {
|
||||||
|
if (!row.shift) {
|
||||||
|
return '/';
|
||||||
|
}
|
||||||
if (row.shift.startTime && row.shift.endTime) {
|
if (row.shift.startTime && row.shift.endTime) {
|
||||||
if (row.shift.restEndTime && row.shift.restStartTime) {
|
if (row.shift.restEndTime && row.shift.restStartTime) {
|
||||||
return `${row.shift.startTime}~${row.shift.endTime} ${row.shift.restStartTime}~${row.shift.restEndTime}`;
|
return `${row.shift.startTime}~${row.shift.endTime} ${row.shift.restStartTime}~${row.shift.restEndTime}`;
|
||||||
|
@@ -1,14 +1,15 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { RadioGroup, RadioButton } from 'ant-design-vue'
|
import { RadioGroup, RadioButton, message } from 'ant-design-vue';
|
||||||
import { Page } from '@vben/common-ui'
|
import { Page } from '@vben/common-ui';
|
||||||
import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
|
import { ref, onMounted, onBeforeUnmount, reactive } from 'vue';
|
||||||
import * as echarts from 'echarts'
|
import * as echarts from 'echarts';
|
||||||
import type { ECharts, EChartsOption } from 'echarts'
|
import type { ECharts, EChartsOption } from 'echarts';
|
||||||
import FloorTree from "../components/floor-tree.vue"
|
import FloorTree from '../components/floor-tree.vue';
|
||||||
import dayjs from "dayjs"
|
import dayjs from 'dayjs';
|
||||||
|
import { meterRecordTrend } from '#/api/property/energyManagement/meterRecord';
|
||||||
|
|
||||||
// 左边楼层用
|
// 左边楼层用
|
||||||
const selectFloorId = ref<string[]>([])
|
const selectFloorId = ref<string[]>([]);
|
||||||
|
|
||||||
const chainData = reactive({
|
const chainData = reactive({
|
||||||
todayEnergy: '231.78',
|
todayEnergy: '231.78',
|
||||||
@@ -23,27 +24,27 @@ const chainData = reactive({
|
|||||||
lastYearSamePeriodEnergy: '--',
|
lastYearSamePeriodEnergy: '--',
|
||||||
yearTrendPercentage: '--',
|
yearTrendPercentage: '--',
|
||||||
yearTrendValue: '--',
|
yearTrendValue: '--',
|
||||||
})
|
});
|
||||||
|
|
||||||
const peakData = reactive({
|
const peakData = reactive({
|
||||||
todayPeakPower: '2961.08',
|
todayPeakPower: '2961.08',
|
||||||
todayPeakTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
|
todayPeakTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
|
||||||
yesterdayPeakPower: '2993.89',
|
yesterdayPeakPower: '2993.89',
|
||||||
yesterdayPeakTime: dayjs().subtract(1, 'day').format('YYYY-MM-DD HH:mm:ss'),
|
yesterdayPeakTime: dayjs().subtract(1, 'day').format('YYYY-MM-DD HH:mm:ss'),
|
||||||
})
|
});
|
||||||
|
|
||||||
const energyTrendTime = ref('1')
|
const energyTrendTime = ref('1');
|
||||||
|
|
||||||
// 能耗趋势图表容器
|
// 能耗趋势图表容器
|
||||||
const energyTrendChart = ref<HTMLElement | null>(null)
|
const energyTrendChart = ref<HTMLElement | null>(null);
|
||||||
const energyTrendInstance = ref<ECharts | null>(null)
|
const energyTrendInstance = ref<ECharts | null>(null);
|
||||||
|
|
||||||
const energyTrendOption: EChartsOption = {
|
const energyTrendOption: EChartsOption = {
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'item',
|
trigger: 'item',
|
||||||
axisPointer: {
|
axisPointer: {
|
||||||
type: 'shadow'
|
type: 'shadow',
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
type: 'category',
|
type: 'category',
|
||||||
@@ -61,73 +62,78 @@ const energyTrendOption: EChartsOption = {
|
|||||||
markPoint: {
|
markPoint: {
|
||||||
data: [
|
data: [
|
||||||
{ type: 'max', name: 'Max' },
|
{ type: 'max', name: 'Max' },
|
||||||
{ type: 'min', name: 'Min' }
|
{ type: 'min', name: 'Min' },
|
||||||
]
|
|
||||||
},
|
|
||||||
}
|
|
||||||
],
|
],
|
||||||
}
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
const initEnergyTrendChart = () => {
|
const initEnergyTrendChart = () => {
|
||||||
if (energyTrendChart.value) {
|
if (energyTrendChart.value) {
|
||||||
// 销毁旧实例
|
// 销毁旧实例
|
||||||
energyTrendInstance.value?.dispose()
|
energyTrendInstance.value?.dispose();
|
||||||
// 创建新实例
|
// 创建新实例
|
||||||
energyTrendInstance.value = echarts.init(energyTrendChart.value)
|
energyTrendInstance.value = echarts.init(energyTrendChart.value);
|
||||||
// 设置配置项
|
// 设置配置项
|
||||||
energyTrendInstance.value.setOption(energyTrendOption)
|
energyTrendInstance.value.setOption(energyTrendOption);
|
||||||
buildingEnergyTrendData('1')
|
// buildingEnergyTrendData('1');
|
||||||
// 可选:添加窗口大小变化监听
|
// 可选:添加窗口大小变化监听
|
||||||
const resizeHandler = () => {
|
const resizeHandler = () => {
|
||||||
energyTrendInstance.value?.resize()
|
energyTrendInstance.value?.resize();
|
||||||
}
|
};
|
||||||
window.addEventListener('resize', resizeHandler)
|
window.addEventListener('resize', resizeHandler);
|
||||||
|
|
||||||
// 在组件卸载前移除监听
|
// 在组件卸载前移除监听
|
||||||
onBeforeUnmount(() => {
|
onBeforeUnmount(() => {
|
||||||
window.removeEventListener('resize', resizeHandler)
|
window.removeEventListener('resize', resizeHandler);
|
||||||
})
|
});
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
};
|
||||||
|
|
||||||
function buildingEnergyTrendData(val: string) {
|
function buildingEnergyTrendData(val: string) {
|
||||||
const now = new Date()
|
if (trendData.value.hour == null) {
|
||||||
let timeArr = []
|
message.warning('请先选择楼层或电表!');
|
||||||
let valArr = []
|
return;
|
||||||
let name = '时间'
|
}
|
||||||
|
|
||||||
|
const now = new Date();
|
||||||
|
let timeArr = [];
|
||||||
|
let valArr = [];
|
||||||
|
let name = '时间';
|
||||||
if (val == '1') {
|
if (val == '1') {
|
||||||
const hour = now.getHours()
|
const hour = now.getHours();
|
||||||
for (let i = 0; i < hour; i++) {
|
for (let i = 0; i < hour; i++) {
|
||||||
timeArr.push(i)
|
timeArr.push(i + ':00');
|
||||||
valArr.push(parseFloat((Math.random() * 35).toFixed(2)))
|
|
||||||
}
|
}
|
||||||
|
valArr = trendData.value.hour.today.data;
|
||||||
} else if (val == '2') {
|
} else if (val == '2') {
|
||||||
const day = now.getDate()
|
const day = now.getDate();
|
||||||
for (let i = 1; i < day; i++) {
|
for (let i = 1; i < day; i++) {
|
||||||
timeArr.push(i)
|
timeArr.push(i);
|
||||||
valArr.push(parseFloat((Math.random() * 800).toFixed(2)))
|
|
||||||
}
|
}
|
||||||
name = '日期'
|
name = '日期';
|
||||||
|
valArr = trendData.value.day.nowMonth.data;
|
||||||
} else {
|
} else {
|
||||||
const month = now.getMonth() + 1
|
const month = now.getMonth() + 1;
|
||||||
for (let i = 1; i < month; i++) {
|
for (let i = 1; i < month + 1; i++) {
|
||||||
timeArr.push(i)
|
timeArr.push(i);
|
||||||
valArr.push(parseFloat((Math.random() * 21000).toFixed(2)))
|
|
||||||
}
|
}
|
||||||
name = '月份'
|
name = '月份';
|
||||||
|
valArr = trendData.value.month.nowYear.data;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (energyTrendInstance.value) {
|
if (energyTrendInstance.value) {
|
||||||
energyTrendInstance.value.setOption({
|
energyTrendInstance.value.setOption({
|
||||||
xAxis: { data: timeArr, name },
|
xAxis: { data: timeArr, name },
|
||||||
series: [{ data: valArr }],
|
series: [{ data: valArr }],
|
||||||
})
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
//日用电率
|
//日用电率
|
||||||
const powerCurveChart = ref<HTMLElement | null>(null)
|
const powerCurveChart = ref<HTMLElement | null>(null);
|
||||||
const powerCurveInstance = ref<ECharts | null>(null)
|
const powerCurveInstance = ref<ECharts | null>(null);
|
||||||
|
|
||||||
const powerCurveOption: EChartsOption = {
|
const powerCurveOption: EChartsOption = {
|
||||||
tooltip: {
|
tooltip: {
|
||||||
@@ -135,28 +141,53 @@ const powerCurveOption: EChartsOption = {
|
|||||||
axisPointer: {
|
axisPointer: {
|
||||||
type: 'cross',
|
type: 'cross',
|
||||||
crossStyle: {
|
crossStyle: {
|
||||||
color: '#999'
|
color: '#999',
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
toolbox: {
|
toolbox: {
|
||||||
feature: {
|
feature: {
|
||||||
magicType: { show: true, type: ['line', 'bar'] },
|
magicType: { show: true, type: ['line', 'bar'] },
|
||||||
restore: { show: true },
|
restore: { show: true },
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
legend: {
|
legend: {
|
||||||
data: ['今日', '昨日']
|
data: ['今日', '昨日'],
|
||||||
},
|
},
|
||||||
xAxis: [
|
xAxis: [
|
||||||
{
|
{
|
||||||
type: 'category',
|
type: 'category',
|
||||||
data: [],
|
data: [
|
||||||
|
'0:00',
|
||||||
|
'1:00',
|
||||||
|
'2:00',
|
||||||
|
'3:00',
|
||||||
|
'4:00',
|
||||||
|
'5:00',
|
||||||
|
'6:00',
|
||||||
|
'7:00',
|
||||||
|
'8:00',
|
||||||
|
'9: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',
|
||||||
|
],
|
||||||
axisPointer: {
|
axisPointer: {
|
||||||
type: 'shadow'
|
type: 'shadow',
|
||||||
|
},
|
||||||
|
name: '时',
|
||||||
},
|
},
|
||||||
name: '时'
|
|
||||||
}
|
|
||||||
],
|
],
|
||||||
yAxis: [
|
yAxis: [
|
||||||
{
|
{
|
||||||
@@ -166,183 +197,172 @@ const powerCurveOption: EChartsOption = {
|
|||||||
],
|
],
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
name: '今日',
|
name: '昨日',
|
||||||
type: 'line',
|
type: 'line',
|
||||||
smooth: true,
|
smooth: true,
|
||||||
data: [],
|
data: [],
|
||||||
markPoint: {
|
markPoint: {
|
||||||
data: [
|
data: [{ type: 'max' }, { type: 'min' }],
|
||||||
{ type: 'max', },
|
},
|
||||||
{ type: 'min', }
|
itemStyle: { color: '#cbb0e3' }, // 数据点颜色
|
||||||
]
|
lineStyle: { color: '#cbb0e3' }, // 线条颜色
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
const initPowerCurveChart = () => {
|
||||||
|
if (powerCurveChart.value) {
|
||||||
|
// 销毁旧实例
|
||||||
|
powerCurveInstance.value?.dispose();
|
||||||
|
// 创建新实例
|
||||||
|
powerCurveInstance.value = echarts.init(powerCurveChart.value);
|
||||||
|
// 设置配置项
|
||||||
|
powerCurveInstance.value.setOption(powerCurveOption);
|
||||||
|
// 可选:添加窗口大小变化监听
|
||||||
|
const resizeHandler = () => {
|
||||||
|
powerCurveInstance.value?.resize();
|
||||||
|
};
|
||||||
|
window.addEventListener('resize', resizeHandler);
|
||||||
|
|
||||||
|
// 在组件卸载前移除监听
|
||||||
|
onBeforeUnmount(() => {
|
||||||
|
window.removeEventListener('resize', resizeHandler);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 组件挂载后初始化图表
|
||||||
|
onMounted(() => {
|
||||||
|
initEnergyTrendChart();
|
||||||
|
initPowerCurveChart();
|
||||||
|
});
|
||||||
|
|
||||||
|
// 组件卸载前销毁图表实例
|
||||||
|
onBeforeUnmount(() => {
|
||||||
|
energyTrendInstance.value?.dispose();
|
||||||
|
powerCurveInstance.value?.dispose();
|
||||||
|
});
|
||||||
|
|
||||||
|
const trendData = ref<any>({});
|
||||||
|
async function handleSelectFloor(selectedKeys, info) {
|
||||||
|
const now = new Date();
|
||||||
|
// 获取年、月、日
|
||||||
|
const year = now.getFullYear();
|
||||||
|
// 月份从0开始,所以要+1,并格式化为两位数
|
||||||
|
const month = String(now.getMonth() + 1).padStart(2, '0');
|
||||||
|
// 日期格式化为两位数
|
||||||
|
const day = String(now.getDate()).padStart(2, '0');
|
||||||
|
|
||||||
|
let data = {
|
||||||
|
day: year + '-' + month + '-' + day,
|
||||||
|
month: year + '-' + month,
|
||||||
|
year: year,
|
||||||
|
meterType: 1,
|
||||||
|
meterId: null,
|
||||||
|
floorId: null,
|
||||||
|
};
|
||||||
|
|
||||||
|
if (info.node.level == 3) {
|
||||||
|
data.floorId = selectedKeys[0];
|
||||||
|
} else {
|
||||||
|
data.meterId = selectedKeys[0];
|
||||||
|
}
|
||||||
|
|
||||||
|
const trend = await meterRecordTrend(data);
|
||||||
|
trendData.value = trend;
|
||||||
|
|
||||||
|
// 趋势曲线
|
||||||
|
let timeArr = [];
|
||||||
|
let valArr = [];
|
||||||
|
let name = '时间';
|
||||||
|
if (energyTrendTime.value == '1') {
|
||||||
|
const hour = now.getHours();
|
||||||
|
for (let i = 0; i < hour; i++) {
|
||||||
|
timeArr.push(i + ':00');
|
||||||
|
}
|
||||||
|
valArr = trend.hour.today.data;
|
||||||
|
} else if (energyTrendTime.value == '2') {
|
||||||
|
const day = now.getDate();
|
||||||
|
for (let i = 1; i < day; i++) {
|
||||||
|
timeArr.push(i);
|
||||||
|
}
|
||||||
|
name = '日期';
|
||||||
|
valArr = trend.day.nowMonth.data;
|
||||||
|
} else {
|
||||||
|
const month = now.getMonth() + 1;
|
||||||
|
for (let i = 1; i < month + 1; i++) {
|
||||||
|
timeArr.push(i);
|
||||||
|
}
|
||||||
|
name = '月份';
|
||||||
|
valArr = trend.month.nowYear.data;
|
||||||
|
}
|
||||||
|
if (energyTrendInstance.value) {
|
||||||
|
energyTrendInstance.value.setOption({
|
||||||
|
xAxis: { data: timeArr, name },
|
||||||
|
series: [{ data: valArr }],
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (powerCurveInstance.value) {
|
||||||
|
powerCurveInstance.value.setOption({
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '今日',
|
||||||
|
type: 'line',
|
||||||
|
smooth: true,
|
||||||
|
data: trend.hour.today.data,
|
||||||
|
markPoint: {
|
||||||
|
data: [{ type: 'max' }, { type: 'min' }],
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '昨日',
|
name: '昨日',
|
||||||
type: 'line',
|
type: 'line',
|
||||||
smooth: true,
|
smooth: true,
|
||||||
data: [],
|
data: trend.hour.yesterday.data,
|
||||||
markPoint: {
|
markPoint: {
|
||||||
data: [
|
data: [{ type: 'max' }, { type: 'min' }],
|
||||||
{ type: 'max', },
|
|
||||||
{ type: 'min', }
|
|
||||||
]
|
|
||||||
},
|
},
|
||||||
itemStyle: { color: '#cbb0e3' }, // 数据点颜色
|
|
||||||
lineStyle: { color: '#cbb0e3' } // 线条颜色
|
|
||||||
},
|
},
|
||||||
]
|
],
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
const initPowerCurveChart = () => {
|
|
||||||
if (powerCurveChart.value) {
|
|
||||||
// 销毁旧实例
|
|
||||||
powerCurveInstance.value?.dispose()
|
|
||||||
// 创建新实例
|
|
||||||
powerCurveInstance.value = echarts.init(powerCurveChart.value)
|
|
||||||
// 设置配置项
|
|
||||||
powerCurveInstance.value.setOption(powerCurveOption)
|
|
||||||
buildingPowerCurveData()
|
|
||||||
// 可选:添加窗口大小变化监听
|
|
||||||
const resizeHandler = () => {
|
|
||||||
powerCurveInstance.value?.resize()
|
|
||||||
}
|
|
||||||
window.addEventListener('resize', resizeHandler)
|
|
||||||
|
|
||||||
// 在组件卸载前移除监听
|
|
||||||
onBeforeUnmount(() => {
|
|
||||||
window.removeEventListener('resize', resizeHandler)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function buildingPowerCurveData() {
|
|
||||||
const now = new Date()
|
|
||||||
const hour = now.getHours()
|
|
||||||
let yesterday = []
|
|
||||||
let today = []
|
|
||||||
let timeDate = []
|
|
||||||
for (let i = 0; i < 24; i++) {
|
|
||||||
timeDate.push(i)
|
|
||||||
yesterday.push(parseFloat((Math.random() * 3000).toFixed(2)))
|
|
||||||
if (hour > i) {
|
|
||||||
today.push(parseFloat((Math.random() * 3000).toFixed(2)))
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (powerCurveInstance.value) {
|
|
||||||
powerCurveInstance.value.setOption({
|
|
||||||
xAxis: { data: timeDate },
|
|
||||||
series: [{ data: today }, { data: yesterday }],
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 组件挂载后初始化图表
|
|
||||||
onMounted(() => {
|
|
||||||
initEnergyTrendChart()
|
|
||||||
initPowerCurveChart()
|
|
||||||
})
|
|
||||||
|
|
||||||
// 组件卸载前销毁图表实例
|
|
||||||
onBeforeUnmount(() => {
|
|
||||||
energyTrendInstance.value?.dispose()
|
|
||||||
powerCurveInstance.value?.dispose()
|
|
||||||
})
|
|
||||||
|
|
||||||
function handleSelectFloor() {
|
|
||||||
console.log(selectFloorId.value[0])
|
|
||||||
}
|
}
|
||||||
</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>
|
<FloorTree class="w-[260px]" @select="handleSelectFloor"></FloorTree>
|
||||||
<div class="flex-1 overflow-hidden">
|
<div class="flex-1 overflow-hidden">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="comparison-section-container">
|
|
||||||
<div class="section-header">
|
|
||||||
<div class="header-title">环比</div>
|
|
||||||
</div>
|
|
||||||
<div class="comparison-grid">
|
|
||||||
<div class="comparison-item">
|
|
||||||
<div class="item-value">{{ chainData.todayEnergy }}</div>
|
|
||||||
<div class="item-title">今日用能(kW.h)</div>
|
|
||||||
</div>
|
|
||||||
<div class="comparison-item">
|
|
||||||
<div class="item-value">{{ chainData.yesterdaySamePeriodEnergy }}</div>
|
|
||||||
<div class="item-title">昨日同期(kW.h)</div>
|
|
||||||
</div>
|
|
||||||
<div class="comparison-item">
|
|
||||||
<div class="item-top">
|
|
||||||
<div class="item-percent">{{ chainData.dayTrendPercentage }}</div>
|
|
||||||
<div>{{ chainData.dayTrendValue }}<span class="item-unit">kW.h</span></div>
|
|
||||||
</div>
|
|
||||||
<div class="item-title">趋势</div>
|
|
||||||
</div>
|
|
||||||
<div class="comparison-item">
|
|
||||||
<div class="item-value">{{ chainData.currentMonthEnergy }}</div>
|
|
||||||
<div class="item-title">当月用能(kW.h)</div>
|
|
||||||
</div>
|
|
||||||
<div class="comparison-item">
|
|
||||||
<div class="item-value">{{ chainData.lastMonthSamePeriodEnergy }}</div>
|
|
||||||
<div class="item-title">上月同期(kW.h)</div>
|
|
||||||
</div>
|
|
||||||
<div class="comparison-item">
|
|
||||||
<div class="item-top">
|
|
||||||
<div class="item-percent">{{ chainData.monthTrendPercentage }}</div>
|
|
||||||
<div>{{ chainData.monthTrendValue }}
|
|
||||||
<span class="item-title">kW.h</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="item-title">趋势</div>
|
|
||||||
</div>
|
|
||||||
<div class="comparison-item">
|
|
||||||
<div class="item-value">{{ chainData.currentYearEnergy }}</div>
|
|
||||||
<div class="item-title">当年用能(kW.h)</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="comparison-item">
|
|
||||||
<div class="item-value">{{ chainData.lastYearSamePeriodEnergy }}</div>
|
|
||||||
<div class="item-title">去年同期(kW.h)</div>
|
|
||||||
</div>
|
|
||||||
<div class="comparison-item">
|
|
||||||
<div class="item-top">
|
|
||||||
<div class="item-percent">{{ chainData.yearTrendPercentage }}</div>
|
|
||||||
<div>{{ chainData.yearTrendValue }}
|
|
||||||
<span class="item-title">kW.h</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="item-title">趋势</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="energy-trend-container">
|
<div class="energy-trend-container">
|
||||||
<div class="energy-trend-top">
|
<div class="energy-trend-top">
|
||||||
<div class="section-header">
|
<div class="section-header">
|
||||||
<div class="header-title">能耗趋势</div>
|
<div class="header-title">能耗趋势</div>
|
||||||
</div>
|
</div>
|
||||||
<RadioGroup v-model:value="energyTrendTime" button-style="solid" size="small"
|
<RadioGroup
|
||||||
@change="buildingEnergyTrendData(energyTrendTime)">
|
v-model:value="energyTrendTime"
|
||||||
|
button-style="solid"
|
||||||
|
size="small"
|
||||||
|
@change="buildingEnergyTrendData(energyTrendTime)"
|
||||||
|
>
|
||||||
<RadioButton value="1">当日</RadioButton>
|
<RadioButton value="1">当日</RadioButton>
|
||||||
<RadioButton value="2">当月</RadioButton>
|
<RadioButton value="2">当月</RadioButton>
|
||||||
<RadioButton value="3">当年</RadioButton>
|
<RadioButton value="3">当年</RadioButton>
|
||||||
</RadioGroup>
|
</RadioGroup>
|
||||||
</div>
|
</div>
|
||||||
<div class="chart-placeholder" ref="energyTrendChart">
|
<div class="chart-placeholder" ref="energyTrendChart"></div>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="power-curve-container">
|
<div class="power-curve-container">
|
||||||
<div class="section-header">
|
<div class="section-header">
|
||||||
<div class="header-title">日用电功率曲线</div>
|
<div class="header-title">平均电功率曲线</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- <div class="chart-placeholder" ref="powerCurveChart">-->
|
<div class="power-chart" ref="powerCurveChart"></div>
|
||||||
<div class="power-chart" ref="powerCurveChart">
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<!-- <div class="power-peak-container">
|
||||||
<div class="power-peak-container">
|
|
||||||
<div class="section-header">
|
<div class="section-header">
|
||||||
<div class="header-title">电功率峰值</div>
|
<div class="header-title">电功率峰值</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -356,7 +376,7 @@ function handleSelectFloor() {
|
|||||||
<p class="time">{{ peakData.yesterdayPeakTime }}</p>
|
<p class="time">{{ peakData.yesterdayPeakTime }}</p>
|
||||||
<div class="bottom-text">昨日(kW)</div>
|
<div class="bottom-text">昨日(kW)</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div> -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -390,7 +410,7 @@ function handleSelectFloor() {
|
|||||||
|
|
||||||
.energy-trend-top {
|
.energy-trend-top {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
|
||||||
.section-header {
|
.section-header {
|
||||||
|
@@ -1,6 +1,6 @@
|
|||||||
<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, nextTick } 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';
|
||||||
@@ -21,18 +21,19 @@ const disabledYear = (current: Dayjs) => {
|
|||||||
return current && current > dayjs().endOf('year');
|
return current && current > dayjs().endOf('year');
|
||||||
};
|
};
|
||||||
|
|
||||||
const chartInstances = ref({
|
const chartInstances = {
|
||||||
day: null as echarts.ECharts | null,
|
day: null as echarts.ECharts | null,
|
||||||
month: null as echarts.ECharts | null,
|
month: null as echarts.ECharts | null,
|
||||||
year: 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');
|
||||||
chartInstances.value.day = echarts.init(chartDay);
|
chartInstances.day = echarts.init(chartDay);
|
||||||
const optionDay = {
|
const optionDay = {
|
||||||
tooltip: {
|
tooltip: {
|
||||||
|
show: true,
|
||||||
trigger: 'axis',
|
trigger: 'axis',
|
||||||
},
|
},
|
||||||
legend: {
|
legend: {
|
||||||
@@ -50,7 +51,32 @@ onMounted(() => {
|
|||||||
{
|
{
|
||||||
type: 'category',
|
type: 'category',
|
||||||
name: '时',
|
name: '时',
|
||||||
data: [],
|
data: [
|
||||||
|
'0:00',
|
||||||
|
'1:00',
|
||||||
|
'2:00',
|
||||||
|
'3:00',
|
||||||
|
'4:00',
|
||||||
|
'5:00',
|
||||||
|
'6:00',
|
||||||
|
'7:00',
|
||||||
|
'8:00',
|
||||||
|
'9: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: [
|
||||||
@@ -59,33 +85,12 @@ onMounted(() => {
|
|||||||
name: 'KW.h',
|
name: 'KW.h',
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: '当日',
|
|
||||||
type: 'bar',
|
|
||||||
data: [],
|
|
||||||
markPoint: {
|
|
||||||
data: [
|
|
||||||
{ type: 'max', name: 'Max' },
|
|
||||||
{ type: 'min', name: 'Min' },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
dataZoom: [
|
|
||||||
{
|
|
||||||
type: 'inside',
|
|
||||||
xAxisIndex: 0,
|
|
||||||
zoomOnMouseWheel: true,
|
|
||||||
filterMode: 'filter',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
};
|
||||||
optionDay && chartInstances.value.day.setOption(optionDay);
|
optionDay && chartInstances.day.setOption(optionDay);
|
||||||
|
|
||||||
//month
|
//month
|
||||||
const chartMonth = document.getElementById('month');
|
const chartMonth = document.getElementById('month');
|
||||||
chartInstances.value.month = echarts.init(chartMonth);
|
chartInstances.month = echarts.init(chartMonth);
|
||||||
const optionMonth = {
|
const optionMonth = {
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'axis',
|
trigger: 'axis',
|
||||||
@@ -105,7 +110,10 @@ onMounted(() => {
|
|||||||
{
|
{
|
||||||
type: 'category',
|
type: 'category',
|
||||||
name: '日',
|
name: '日',
|
||||||
data: [],
|
data: [
|
||||||
|
1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
|
||||||
|
21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31,
|
||||||
|
],
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
yAxis: [
|
yAxis: [
|
||||||
@@ -114,19 +122,6 @@ onMounted(() => {
|
|||||||
name: 'KW.h',
|
name: 'KW.h',
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: '当月',
|
|
||||||
type: 'bar',
|
|
||||||
data: [],
|
|
||||||
markPoint: {
|
|
||||||
data: [
|
|
||||||
{ type: 'max', name: 'Max' },
|
|
||||||
{ type: 'min', name: 'Min' },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
dataZoom: [
|
dataZoom: [
|
||||||
{
|
{
|
||||||
type: 'inside',
|
type: 'inside',
|
||||||
@@ -136,11 +131,11 @@ onMounted(() => {
|
|||||||
},
|
},
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
optionMonth && chartInstances.value.month.setOption(optionMonth);
|
optionMonth && chartInstances.month.setOption(optionMonth);
|
||||||
|
|
||||||
//year
|
//year
|
||||||
const chartYear = document.getElementById('year');
|
const chartYear = document.getElementById('year');
|
||||||
chartInstances.value.year = echarts.init(chartYear);
|
chartInstances.year = echarts.init(chartYear);
|
||||||
const optionYear = {
|
const optionYear = {
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'axis',
|
trigger: 'axis',
|
||||||
@@ -160,7 +155,7 @@ onMounted(() => {
|
|||||||
{
|
{
|
||||||
type: 'category',
|
type: 'category',
|
||||||
name: '月',
|
name: '月',
|
||||||
data: [],
|
data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
yAxis: [
|
yAxis: [
|
||||||
@@ -169,19 +164,6 @@ onMounted(() => {
|
|||||||
name: 'KW.h',
|
name: 'KW.h',
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: '当年',
|
|
||||||
type: 'bar',
|
|
||||||
data: [],
|
|
||||||
markPoint: {
|
|
||||||
data: [
|
|
||||||
{ type: 'max', name: 'Max' },
|
|
||||||
{ type: 'min', name: 'Min' },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
dataZoom: [
|
dataZoom: [
|
||||||
{
|
{
|
||||||
type: 'inside',
|
type: 'inside',
|
||||||
@@ -191,11 +173,11 @@ onMounted(() => {
|
|||||||
},
|
},
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
optionYear && chartInstances.value.year.setOption(optionYear);
|
optionYear && chartInstances.year.setOption(optionYear);
|
||||||
|
|
||||||
// 鼠标悬停时激活缩放
|
// 鼠标悬停时激活缩放
|
||||||
chartInstances.value.day.on('mouseover', { seriesIndex: 0 }, () => {
|
chartInstances.day.on('mouseover', { seriesIndex: 0 }, () => {
|
||||||
chartInstances.value.day.dispatchAction({
|
chartInstances.day.dispatchAction({
|
||||||
type: 'takeGlobalCursor',
|
type: 'takeGlobalCursor',
|
||||||
key: 'dataZoomSelect',
|
key: 'dataZoomSelect',
|
||||||
dataZoomSelectActive: true,
|
dataZoomSelectActive: true,
|
||||||
@@ -203,8 +185,8 @@ onMounted(() => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
// 鼠标离开时取消缩放
|
// 鼠标离开时取消缩放
|
||||||
chartInstances.value.day.on('mouseout', { seriesIndex: 0 }, () => {
|
chartInstances.day.on('mouseout', { seriesIndex: 0 }, () => {
|
||||||
chartInstances.value.day.dispatchAction({
|
chartInstances.day.dispatchAction({
|
||||||
type: 'takeGlobalCursor',
|
type: 'takeGlobalCursor',
|
||||||
key: 'dataZoomSelect',
|
key: 'dataZoomSelect',
|
||||||
dataZoomSelectActive: false,
|
dataZoomSelectActive: false,
|
||||||
@@ -212,8 +194,8 @@ onMounted(() => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
// 鼠标悬停时激活缩放
|
// 鼠标悬停时激活缩放
|
||||||
chartInstances.value.year.on('mouseover', { seriesIndex: 0 }, () => {
|
chartInstances.year.on('mouseover', { seriesIndex: 0 }, () => {
|
||||||
chartInstances.value.year.dispatchAction({
|
chartInstances.year.dispatchAction({
|
||||||
type: 'takeGlobalCursor',
|
type: 'takeGlobalCursor',
|
||||||
key: 'dataZoomSelect',
|
key: 'dataZoomSelect',
|
||||||
dataZoomSelectActive: true,
|
dataZoomSelectActive: true,
|
||||||
@@ -221,8 +203,8 @@ onMounted(() => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
// 鼠标离开时取消缩放
|
// 鼠标离开时取消缩放
|
||||||
chartInstances.value.year.on('mouseout', { seriesIndex: 0 }, () => {
|
chartInstances.year.on('mouseout', { seriesIndex: 0 }, () => {
|
||||||
chartInstances.value.year.dispatchAction({
|
chartInstances.year.dispatchAction({
|
||||||
type: 'takeGlobalCursor',
|
type: 'takeGlobalCursor',
|
||||||
key: 'dataZoomSelect',
|
key: 'dataZoomSelect',
|
||||||
dataZoomSelectActive: false,
|
dataZoomSelectActive: false,
|
||||||
@@ -230,8 +212,8 @@ onMounted(() => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
// 鼠标悬停时激活缩放
|
// 鼠标悬停时激活缩放
|
||||||
chartInstances.value.month.on('mouseover', { seriesIndex: 0 }, () => {
|
chartInstances.month.on('mouseover', { seriesIndex: 0 }, () => {
|
||||||
chartInstances.value.month.dispatchAction({
|
chartInstances.month.dispatchAction({
|
||||||
type: 'takeGlobalCursor',
|
type: 'takeGlobalCursor',
|
||||||
key: 'dataZoomSelect',
|
key: 'dataZoomSelect',
|
||||||
dataZoomSelectActive: true,
|
dataZoomSelectActive: true,
|
||||||
@@ -239,8 +221,8 @@ onMounted(() => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
// 鼠标离开时取消缩放
|
// 鼠标离开时取消缩放
|
||||||
chartInstances.value.month.on('mouseout', { seriesIndex: 0 }, () => {
|
chartInstances.month.on('mouseout', { seriesIndex: 0 }, () => {
|
||||||
chartInstances.value.month.dispatchAction({
|
chartInstances.month.dispatchAction({
|
||||||
type: 'takeGlobalCursor',
|
type: 'takeGlobalCursor',
|
||||||
key: 'dataZoomSelect',
|
key: 'dataZoomSelect',
|
||||||
dataZoomSelectActive: false,
|
dataZoomSelectActive: false,
|
||||||
@@ -248,7 +230,9 @@ onMounted(() => {
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
const trendData = ref<any>({});
|
const hourTotal = ref<number>();
|
||||||
|
const dayTotal = ref<number>();
|
||||||
|
const monthTotal = ref<number>();
|
||||||
async function handleSelectFloor(selectedKeys, info) {
|
async function handleSelectFloor(selectedKeys, info) {
|
||||||
let data = {
|
let data = {
|
||||||
day: currentDay.value.format('YYYY-MM-DD'),
|
day: currentDay.value.format('YYYY-MM-DD'),
|
||||||
@@ -268,45 +252,93 @@ async function handleSelectFloor(selectedKeys, info) {
|
|||||||
const trend = await meterRecordTrend(data);
|
const trend = await meterRecordTrend(data);
|
||||||
|
|
||||||
// 更新日数据图表
|
// 更新日数据图表
|
||||||
if (chartInstances.value.day && trend.hour) {
|
if (chartInstances.day && trend.hour) {
|
||||||
chartInstances.value.day.setOption({
|
hourTotal.value = trend.hour.today.total;
|
||||||
xAxis: {
|
chartInstances.day.setOption({
|
||||||
data: trend.hour.categories || [],
|
|
||||||
},
|
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
name: '当月',
|
name: '昨日',
|
||||||
data: trend.hour.data || [],
|
type: 'bar',
|
||||||
|
data: trend.hour.yesterday.data || [],
|
||||||
|
markPoint: {
|
||||||
|
data: [
|
||||||
|
{ type: 'max', name: 'Max' },
|
||||||
|
{ type: 'min', name: 'Min' },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '当日',
|
||||||
|
type: 'bar',
|
||||||
|
data: trend.hour.today.data || [],
|
||||||
|
markPoint: {
|
||||||
|
data: [
|
||||||
|
{ type: 'max', name: 'Max' },
|
||||||
|
{ type: 'min', name: 'Min' },
|
||||||
|
],
|
||||||
|
},
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// 更新月数据图表
|
// 更新月数据图表
|
||||||
if (chartInstances.value.month && trend.day) {
|
if (chartInstances.month && trend.day) {
|
||||||
chartInstances.value.month.setOption({
|
dayTotal.value = trend.day.nowMonth.total;
|
||||||
xAxis: {
|
chartInstances.month.setOption({
|
||||||
data: trend.day.categories || [],
|
|
||||||
},
|
|
||||||
series: [
|
series: [
|
||||||
|
{
|
||||||
|
name: '上月',
|
||||||
|
type: 'bar',
|
||||||
|
data: trend.day.lastMonth.data || [],
|
||||||
|
markPoint: {
|
||||||
|
data: [
|
||||||
|
{ type: 'max', name: 'Max' },
|
||||||
|
{ type: 'min', name: 'Min' },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
{
|
{
|
||||||
name: '当月',
|
name: '当月',
|
||||||
data: trend.day.data || [],
|
type: 'bar',
|
||||||
|
data: trend.day.nowMonth.data || [],
|
||||||
|
markPoint: {
|
||||||
|
data: [
|
||||||
|
{ type: 'max', name: 'Max' },
|
||||||
|
{ type: 'min', name: 'Min' },
|
||||||
|
],
|
||||||
|
},
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// 更新年数据图表
|
// 更新年数据图表
|
||||||
if (chartInstances.value.year && trend.month) {
|
if (chartInstances.year && trend.month) {
|
||||||
chartInstances.value.year.setOption({
|
monthTotal.value = trend.month.nowYear.total;
|
||||||
xAxis: {
|
chartInstances.year.setOption({
|
||||||
data: trend.month.categories || [],
|
|
||||||
},
|
|
||||||
series: [
|
series: [
|
||||||
|
{
|
||||||
|
name: '去年',
|
||||||
|
type: 'bar',
|
||||||
|
data: trend.month.lastYear.data || [],
|
||||||
|
markPoint: {
|
||||||
|
data: [
|
||||||
|
{ type: 'max', name: 'Max' },
|
||||||
|
{ type: 'min', name: 'Min' },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
{
|
{
|
||||||
name: '当年',
|
name: '当年',
|
||||||
data: trend.month.data || [],
|
type: 'bar',
|
||||||
|
data: trend.month.nowYear.data || [],
|
||||||
|
markPoint: {
|
||||||
|
data: [
|
||||||
|
{ type: 'max', name: 'Max' },
|
||||||
|
{ type: 'min', name: 'Min' },
|
||||||
|
],
|
||||||
|
},
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
});
|
});
|
||||||
@@ -332,7 +364,8 @@ async function handleSelectFloor(selectedKeys, info) {
|
|||||||
<DatePicker
|
<DatePicker
|
||||||
v-model:value="currentDay"
|
v-model:value="currentDay"
|
||||||
:disabled-date="disabledDay"
|
:disabled-date="disabledDay"
|
||||||
/>当日能耗总值:125.04KW.h
|
/>
|
||||||
|
<span>当日能耗总值:{{ hourTotal }}KW.h</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="day" style="height: 100%; width: 100%"></div>
|
<div id="day" style="height: 100%; width: 100%"></div>
|
||||||
@@ -352,7 +385,8 @@ async function handleSelectFloor(selectedKeys, info) {
|
|||||||
v-model:value="currentMonth"
|
v-model:value="currentMonth"
|
||||||
:disabled-date="disabledMonth"
|
:disabled-date="disabledMonth"
|
||||||
picker="month"
|
picker="month"
|
||||||
/>当月能耗总值:125.04KW.h
|
/>
|
||||||
|
<span>当月能耗总值:{{ dayTotal }}KW.h</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="month" style="height: 100%; width: 100%"></div>
|
<div id="month" style="height: 100%; width: 100%"></div>
|
||||||
@@ -372,7 +406,8 @@ async function handleSelectFloor(selectedKeys, info) {
|
|||||||
v-model:value="currentYear"
|
v-model:value="currentYear"
|
||||||
:disabled-date="disabledYear"
|
:disabled-date="disabledYear"
|
||||||
picker="year"
|
picker="year"
|
||||||
/>当年能耗总值:125.04KW.h
|
/>
|
||||||
|
<span>当年能耗总值:{{ monthTotal }}KW.h</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="year" style="height: 100%; width: 100%"></div>
|
<div id="year" style="height: 100%; width: 100%"></div>
|
||||||
|
@@ -3,10 +3,76 @@ import type { VxeGridProps } from '#/adapter/vxe-table';
|
|||||||
import dayjs from 'dayjs';
|
import dayjs from 'dayjs';
|
||||||
|
|
||||||
export const querySchema: FormSchemaGetter = () => [
|
export const querySchema: FormSchemaGetter = () => [
|
||||||
|
{
|
||||||
|
component: 'Select',
|
||||||
|
fieldName: 'plName',
|
||||||
|
label: '停车场',
|
||||||
|
componentProps: {
|
||||||
|
// 只有以下固定的停车场名称
|
||||||
|
options: [
|
||||||
|
{
|
||||||
|
label: '综合服务中心负二楼停车场',
|
||||||
|
value: 'PFN000000025',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '综合服务中心地面停车场',
|
||||||
|
value: 'PFN000000022',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '综合服务中心负一楼停车场',
|
||||||
|
value: 'PFN000000012',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
{
|
{
|
||||||
component: 'Input',
|
component: 'Input',
|
||||||
fieldName: 'orderId',
|
fieldName: 'carNumber',
|
||||||
label: '订单编号',
|
label: '车牌号',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
component: 'DatePicker',
|
||||||
|
fieldName: 'parkInBeginTime',
|
||||||
|
label: '进场时间',
|
||||||
|
formItemClass: 'col-span-1',
|
||||||
|
componentProps: {
|
||||||
|
showTime: true,
|
||||||
|
format: 'YYYY-MM-DD HH:mm:ss',
|
||||||
|
valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
||||||
|
placeholder: '开始时间',
|
||||||
|
style: { width: '100%' },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
component: 'DatePicker',
|
||||||
|
fieldName: 'parkInEndTime',
|
||||||
|
label: '',
|
||||||
|
labelWidth: 0,
|
||||||
|
formItemClass: 'col-span-1',
|
||||||
|
componentProps: {
|
||||||
|
showTime: true,
|
||||||
|
format: 'YYYY-MM-DD HH:mm:ss',
|
||||||
|
valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
||||||
|
placeholder: '结束时间',
|
||||||
|
style: { width: 'calc(100% - 120px)' },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
component: 'Select',
|
||||||
|
fieldName: 'carBusiType',
|
||||||
|
label: '停车类型',
|
||||||
|
componentProps: {
|
||||||
|
options: [
|
||||||
|
{
|
||||||
|
label: '临时车',
|
||||||
|
value: '1',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '月租车',
|
||||||
|
value: '2',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
|
@@ -94,17 +94,9 @@ const gridOptions: VxeGridProps = {
|
|||||||
await externalLoginOnLoad();
|
await externalLoginOnLoad();
|
||||||
if (token.value) {
|
if (token.value) {
|
||||||
try {
|
try {
|
||||||
const response = await fetch(
|
const params: any = {
|
||||||
'https://server.cqnctc.com:6081/web/lot/net/queryOrderParkForPage',
|
// plNos、carNumber、orgId、orderStates、parkOrderTypes、terminalSource为接口参数固定需求
|
||||||
{
|
// parkStates:10-在场、20-离场
|
||||||
method: 'POST',
|
|
||||||
headers: {
|
|
||||||
'X-Auth-Token': `${sessionStorage.getItem('token')}`,
|
|
||||||
'Content-Type': 'application/json',
|
|
||||||
Authorization: `Bearer ${sessionStorage.getItem('token')}`,
|
|
||||||
Accept: 'application/json, text/plain, */*',
|
|
||||||
},
|
|
||||||
body: JSON.stringify({
|
|
||||||
pageReq: {
|
pageReq: {
|
||||||
pageNum: page.currentPage,
|
pageNum: page.currentPage,
|
||||||
pageSize: page.pageSize,
|
pageSize: page.pageSize,
|
||||||
@@ -116,8 +108,48 @@ 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 (formValues.carNumber) {
|
||||||
|
params.carNumber = formValues.carNumber;
|
||||||
|
}
|
||||||
|
// 停车场名称
|
||||||
|
if (formValues.plName) {
|
||||||
|
params.plNos = [formValues.plName];
|
||||||
|
}
|
||||||
|
// 停车类型
|
||||||
|
if (formValues.carBusiType) {
|
||||||
|
if (formValues.carBusiType === '1') {
|
||||||
|
params.carBusiTypeList = [10];
|
||||||
|
} else {
|
||||||
|
params.carBusiTypeList = [11, 12, 13];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 进场时间——开始时间
|
||||||
|
if (formValues.parkInBeginTime) {
|
||||||
|
params.parkInBeginTime = new Date(
|
||||||
|
formValues.parkInBeginTime,
|
||||||
|
).toISOString();
|
||||||
|
}
|
||||||
|
// 进场时间——结束时间
|
||||||
|
if (formValues.parkInEndTime) {
|
||||||
|
params.parkInEndTime = new Date(
|
||||||
|
formValues.parkInEndTime,
|
||||||
|
).toISOString();
|
||||||
|
}
|
||||||
|
const response = await fetch(
|
||||||
|
'https://server.cqnctc.com:6081/web/lot/net/queryOrderParkForPage',
|
||||||
|
{
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'X-Auth-Token': `${sessionStorage.getItem('token')}`,
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
Authorization: `Bearer ${sessionStorage.getItem('token')}`,
|
||||||
|
Accept: 'application/json, text/plain, */*',
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
...params,
|
||||||
}),
|
}),
|
||||||
},
|
},
|
||||||
);
|
);
|
||||||
|
@@ -11,7 +11,7 @@ export const querySchema: FormSchemaGetter = () => [
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
component: 'Input',
|
component: 'Input',
|
||||||
fieldName: 'customerName',
|
fieldName: 'personName',
|
||||||
label: '人员姓名',
|
label: '人员姓名',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@@ -63,6 +63,7 @@ export const columns: VxeGridProps['columns'] = [
|
|||||||
{
|
{
|
||||||
title: '所属组织',
|
title: '所属组织',
|
||||||
field: 'organFullPath',
|
field: 'organFullPath',
|
||||||
|
minWidth: 180,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '门卡类别',
|
title: '门卡类别',
|
||||||
|
@@ -37,8 +37,8 @@ const gridOptions: VxeGridProps = {
|
|||||||
return await getVisitorList({
|
return await getVisitorList({
|
||||||
pageNum: page.currentPage,
|
pageNum: page.currentPage,
|
||||||
pageSize: page.pageSize,
|
pageSize: page.pageSize,
|
||||||
begTime: typeof formValues.dateRange === 'undefined' ? '' : formValues.dateRange[0],
|
begTime: typeof formValues.dateRange === 'undefined' ? '' : formValues.dateRange[0].format('YYYY-MM-DD'),
|
||||||
endTime: typeof formValues.dateRange === 'undefined' ? '' : formValues.dateRange[1],
|
endTime: typeof formValues.dateRange === 'undefined' ? '' : formValues.dateRange[1].format('YYYY-MM-DD'),
|
||||||
personName: typeof formValues.personName === 'undefined' ? '' : formValues.personName,
|
personName: typeof formValues.personName === 'undefined' ? '' : formValues.personName,
|
||||||
recordType: typeof formValues.recordType === 'undefined' ? '' : formValues.recordType,
|
recordType: typeof formValues.recordType === 'undefined' ? '' : formValues.recordType,
|
||||||
});
|
});
|
||||||
|
@@ -1,13 +1,12 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref } from 'vue';
|
import { ref } from 'vue';
|
||||||
import { Empty } from "ant-design-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 picture2 = ref('');
|
||||||
// const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
|
// const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
|
||||||
// {
|
// {
|
||||||
// initializedGetter: defaultFormValueGetter(formApi),
|
// initializedGetter: defaultFormValueGetter(formApi),
|
||||||
@@ -28,7 +27,7 @@ const [BasicModal, modalApi] = useVbenModal({
|
|||||||
modalApi.modalLoading(true);
|
modalApi.modalLoading(true);
|
||||||
const { data } = modalApi.getData() as { data: any };
|
const { data } = modalApi.getData() as { data: any };
|
||||||
picture1.value = data.voucherUrl;
|
picture1.value = data.voucherUrl;
|
||||||
picture2.value = data.pictureUrl
|
picture2.value = data.pictureUrl;
|
||||||
modalApi.modalLoading(false);
|
modalApi.modalLoading(false);
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
@@ -44,9 +43,7 @@ async function handleConfirm() {
|
|||||||
modalApi.lock(false);
|
modalApi.lock(false);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
async function handleClosed() {
|
async function handleClosed() {}
|
||||||
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
@@ -54,16 +51,31 @@ async function handleClosed() {
|
|||||||
<div class="detail-wrapper">
|
<div class="detail-wrapper">
|
||||||
<div class="detail-grid">
|
<div class="detail-grid">
|
||||||
<div class="detail-card">
|
<div class="detail-card">
|
||||||
<img class="detail-thumb" :src="picture1"></img>
|
<img v-if="picture1" class="detail-thumb" :src="picture1" />
|
||||||
|
<Empty
|
||||||
|
v-else
|
||||||
|
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">
|
||||||
<Empty class="detail-thumb" :image="Empty.PRESENTED_IMAGE_SIMPLE"
|
<Empty
|
||||||
description="暂无数据" />
|
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="picture2"></img>
|
<img v-if="picture2" class="detail-thumb" :src="picture2" />
|
||||||
|
<Empty
|
||||||
|
v-else
|
||||||
|
class="detail-thumb"
|
||||||
|
:image="Empty.PRESENTED_IMAGE_SIMPLE"
|
||||||
|
description="暂无数据"
|
||||||
|
/>
|
||||||
<div class="detail-caption">人脸门禁抓拍</div>
|
<div class="detail-caption">人脸门禁抓拍</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@@ -11,10 +11,7 @@ import { deviceManageList } from '#/api/sis/deviceManage/index.js';
|
|||||||
import { deviceChannelList } from '#/api/sis/deviceChannel/index.js';
|
import { deviceChannelList } from '#/api/sis/deviceChannel/index.js';
|
||||||
import mpegts from 'mpegts.js';
|
import mpegts from 'mpegts.js';
|
||||||
import { message } from 'ant-design-vue';
|
import { message } from 'ant-design-vue';
|
||||||
import {
|
import { addMediaStreamProxy } from '#/api/sis/stream/index.js';
|
||||||
addFFmpegMediaStreamProxy,
|
|
||||||
addMediaStreamProxy,
|
|
||||||
} from '#/api/sis/stream/index.js';
|
|
||||||
import { checkHEVCSupport } from '#/utils/video.js';
|
import { checkHEVCSupport } from '#/utils/video.js';
|
||||||
|
|
||||||
// 地图全局对象
|
// 地图全局对象
|
||||||
@@ -114,7 +111,8 @@ function loadCameraData() {
|
|||||||
function doPlayer(nodeData) {
|
function doPlayer(nodeData) {
|
||||||
if (mpegts.isSupported()) {
|
if (mpegts.isSupported()) {
|
||||||
streamProxy(nodeData, (res) => {
|
streamProxy(nodeData, (res) => {
|
||||||
const url = res.flv;
|
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;
|
||||||
closeVideo(currentPlayer);
|
closeVideo(currentPlayer);
|
||||||
@@ -152,8 +150,8 @@ function streamProxy(params, cb) {
|
|||||||
if (isSupportH265) {
|
if (isSupportH265) {
|
||||||
addMediaStreamProxy(params).then((res) => cb(res));
|
addMediaStreamProxy(params).then((res) => cb(res));
|
||||||
} else {
|
} else {
|
||||||
// addMediaStreamProxy(params).then((res) => cb(res));
|
addMediaStreamProxy(params).then((res) => cb(res));
|
||||||
addFFmpegMediaStreamProxy(params).then((res) => cb(res));
|
// addFFmpegMediaStreamProxy(params).then((res) => cb(res));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@@ -1,7 +1,7 @@
|
|||||||
<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]">
|
||||||
<div class="h-full tree-box">
|
<div class="tree-box h-full">
|
||||||
<DpTree class="h-full w-[300px]" @checked="onNodeChecked" />
|
<DpTree class="h-full w-[300px]" @checked="onNodeChecked" />
|
||||||
</div>
|
</div>
|
||||||
<div class="bg-background flex-1">
|
<div class="bg-background flex-1">
|
||||||
@@ -147,7 +147,7 @@ function streamProxy(nodeData: any, cb: Function) {
|
|||||||
if (nodeData.nvrIp) {
|
if (nodeData.nvrIp) {
|
||||||
params = {
|
params = {
|
||||||
videoIp: nodeData.nvrIp,
|
videoIp: nodeData.nvrIp,
|
||||||
videoPort: nodeData.nvrPort,
|
videoPort: 554,
|
||||||
factoryNo: nodeData.nvrFactoryNo,
|
factoryNo: nodeData.nvrFactoryNo,
|
||||||
account: nodeData.nvrAccount,
|
account: nodeData.nvrAccount,
|
||||||
pwd: nodeData.nvrPwd,
|
pwd: nodeData.nvrPwd,
|
||||||
@@ -156,7 +156,7 @@ function streamProxy(nodeData: any, cb: Function) {
|
|||||||
} else {
|
} else {
|
||||||
params = {
|
params = {
|
||||||
videoIp: nodeData.deviceIp,
|
videoIp: nodeData.deviceIp,
|
||||||
videoPort: nodeData.devicePort,
|
videoPort: 554,
|
||||||
factoryNo: nodeData.factoryNo,
|
factoryNo: nodeData.factoryNo,
|
||||||
account: nodeData.deviceAccount,
|
account: nodeData.deviceAccount,
|
||||||
pwd: nodeData.devicePwd,
|
pwd: nodeData.devicePwd,
|
||||||
@@ -180,7 +180,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.flv;
|
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);
|
||||||
@@ -253,7 +254,7 @@ let isSupportH265 = false;
|
|||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
// 检测浏览器是否支持h265
|
// 检测浏览器是否支持h265
|
||||||
isSupportH265 = checkHEVCSupport();
|
isSupportH265 = checkHEVCSupport();
|
||||||
setInterval(catchUp, 10000);
|
setInterval(catchUp, 120000);
|
||||||
});
|
});
|
||||||
|
|
||||||
onUnmounted(() => {
|
onUnmounted(() => {
|
||||||
|
@@ -144,12 +144,14 @@ async function setupCommunitySelect() {
|
|||||||
{
|
{
|
||||||
componentProps: () => ({
|
componentProps: () => ({
|
||||||
options: arr,
|
options: arr,
|
||||||
|
allowClear: true,
|
||||||
}),
|
}),
|
||||||
fieldName: 'bindDeviceId',
|
fieldName: 'bindDeviceId',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
componentProps: () => ({
|
componentProps: () => ({
|
||||||
options: arr,
|
options: arr,
|
||||||
|
allowClear: true,
|
||||||
mode: 'multiple', // 关键属性,启用多选模式
|
mode: 'multiple', // 关键属性,启用多选模式
|
||||||
}),
|
}),
|
||||||
fieldName: 'devicePoint',
|
fieldName: 'devicePoint',
|
||||||
|
@@ -103,6 +103,15 @@ test.forEach((item) => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
export const modalSchema: FormSchemaGetter = () => [
|
export const modalSchema: FormSchemaGetter = () => [
|
||||||
|
{
|
||||||
|
label: '主键',
|
||||||
|
fieldName: 'id',
|
||||||
|
component: 'Input',
|
||||||
|
dependencies: {
|
||||||
|
show: () => false,
|
||||||
|
triggerFields: [''],
|
||||||
|
},
|
||||||
|
},
|
||||||
{
|
{
|
||||||
label: '人员标签',
|
label: '人员标签',
|
||||||
fieldName: 'rosterType',
|
fieldName: 'rosterType',
|
||||||
|
@@ -274,7 +274,7 @@ function streamProxy(nodeData: any, cb: Function) {
|
|||||||
if (nodeData.nvrIp) {
|
if (nodeData.nvrIp) {
|
||||||
params = {
|
params = {
|
||||||
videoIp: nodeData.nvrIp,
|
videoIp: nodeData.nvrIp,
|
||||||
videoPort: nodeData.nvrPort,
|
videoPort: 554,
|
||||||
factoryNo: nodeData.nvrFactoryNo,
|
factoryNo: nodeData.nvrFactoryNo,
|
||||||
account: nodeData.nvrAccount,
|
account: nodeData.nvrAccount,
|
||||||
pwd: nodeData.nvrPwd,
|
pwd: nodeData.nvrPwd,
|
||||||
@@ -283,7 +283,7 @@ function streamProxy(nodeData: any, cb: Function) {
|
|||||||
} else {
|
} else {
|
||||||
params = {
|
params = {
|
||||||
videoIp: nodeData.deviceIp,
|
videoIp: nodeData.deviceIp,
|
||||||
videoPort: nodeData.devicePort,
|
videoPort: 554,
|
||||||
factoryNo: nodeData.factoryNo,
|
factoryNo: nodeData.factoryNo,
|
||||||
account: nodeData.deviceAccount,
|
account: nodeData.deviceAccount,
|
||||||
pwd: nodeData.devicePwd,
|
pwd: nodeData.devicePwd,
|
||||||
@@ -337,7 +337,6 @@ function doPlayer(nodeData: any, index: number = 0) {
|
|||||||
player,
|
player,
|
||||||
key: nodeData.id,
|
key: nodeData.id,
|
||||||
data: nodeData,
|
data: nodeData,
|
||||||
el: videoElement,
|
|
||||||
};
|
};
|
||||||
} else {
|
} else {
|
||||||
console.log('视频播放元素获取异常');
|
console.log('视频播放元素获取异常');
|
||||||
@@ -381,15 +380,12 @@ 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 { currentTime } = el;
|
|
||||||
if (end && currentTime) {
|
|
||||||
const diff = end - el.currentTime;
|
const diff = end - el.currentTime;
|
||||||
if (diff > 2) {
|
if (diff > 2) {
|
||||||
// 如果延迟超过2秒
|
// 如果延迟超过2秒
|
||||||
el.currentTime = end - 0.5; // 跳转到接近直播点
|
el.currentTime = end - 0.5; // 跳转到接近直播点
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -397,7 +393,7 @@ let isSupportH265 = false;
|
|||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
// 检测浏览器是否支持h265
|
// 检测浏览器是否支持h265
|
||||||
isSupportH265 = checkHEVCSupport();
|
isSupportH265 = checkHEVCSupport();
|
||||||
setInterval(catchUp, 10000);
|
setInterval(catchUp, 120000);
|
||||||
});
|
});
|
||||||
|
|
||||||
onUnmounted(() => {
|
onUnmounted(() => {
|
||||||
|
@@ -58,9 +58,9 @@ export const columns: VxeGridProps['columns'] = [
|
|||||||
slots: {
|
slots: {
|
||||||
default: ({ row }: any) => {
|
default: ({ row }: any) => {
|
||||||
const levelColors: Record<string, string> = {
|
const levelColors: Record<string, string> = {
|
||||||
1: 'red',
|
1: 'blue',
|
||||||
2: 'orange',
|
2: 'orange',
|
||||||
3: 'blue',
|
3: 'red',
|
||||||
};
|
};
|
||||||
return h(
|
return h(
|
||||||
'span',
|
'span',
|
||||||
|
@@ -58,9 +58,9 @@ export const columns: VxeGridProps['columns'] = [
|
|||||||
slots: {
|
slots: {
|
||||||
default: ({ row }: any) => {
|
default: ({ row }: any) => {
|
||||||
const levelColors: Record<string, string> = {
|
const levelColors: Record<string, string> = {
|
||||||
1: 'red',
|
1: 'blue',
|
||||||
2: 'orange',
|
2: 'orange',
|
||||||
3: 'blue',
|
3: 'red',
|
||||||
};
|
};
|
||||||
return h(
|
return h(
|
||||||
'span',
|
'span',
|
||||||
|
@@ -59,9 +59,9 @@ export const columns: VxeGridProps['columns'] = [
|
|||||||
slots: {
|
slots: {
|
||||||
default: ({ row }: any) => {
|
default: ({ row }: any) => {
|
||||||
const levelColors: Record<string, string> = {
|
const levelColors: Record<string, string> = {
|
||||||
1: 'red',
|
1: 'blue',
|
||||||
2: 'orange',
|
2: 'orange',
|
||||||
3: 'blue',
|
3: 'red',
|
||||||
};
|
};
|
||||||
return h(
|
return h(
|
||||||
'span',
|
'span',
|
||||||
|
Reference in New Issue
Block a user