|
|
|
@ -7,17 +7,21 @@ |
|
|
|
size="100%" |
|
|
|
size="100%" |
|
|
|
modal-class="model-dev-opn" |
|
|
|
modal-class="model-dev-opn" |
|
|
|
:before-close="handleBeforeClose" |
|
|
|
:before-close="handleBeforeClose" |
|
|
|
@opened="onDrawerOpened"> |
|
|
|
@opened="onDrawerOpened" |
|
|
|
|
|
|
|
> |
|
|
|
<main class="wh-full flex"> |
|
|
|
<main class="wh-full flex"> |
|
|
|
|
|
|
|
<EdfsWrap |
|
|
|
<EdfsWrap title="点位选择" |
|
|
|
title="点位选择" |
|
|
|
isCollapse :collapsed="collapsed" @collapse="onCollapse" |
|
|
|
isCollapse |
|
|
|
:style="{width: `${collapsed ? 0 : 340}px`}"> |
|
|
|
:collapsed="collapsed" |
|
|
|
|
|
|
|
@collapse="onCollapse" |
|
|
|
|
|
|
|
:style="{ width: `${collapsed ? 0 : 340}px` }" |
|
|
|
|
|
|
|
> |
|
|
|
<el-select |
|
|
|
<el-select |
|
|
|
v-if="currentGroup?.customNode" |
|
|
|
v-if="currentGroup?.customNode" |
|
|
|
v-model="selectValue" |
|
|
|
v-model="selectValue" |
|
|
|
placeholder="单体选择" |
|
|
|
placeholder="单体选择" |
|
|
|
style="width:240px" |
|
|
|
style="width: 240px" |
|
|
|
@change="onchangeSelect" |
|
|
|
@change="onchangeSelect" |
|
|
|
> |
|
|
|
> |
|
|
|
<el-option |
|
|
|
<el-option |
|
|
|
@ -35,8 +39,7 @@ |
|
|
|
> |
|
|
|
> |
|
|
|
</PointCheckbox> |
|
|
|
</PointCheckbox> |
|
|
|
</EdfsWrap> |
|
|
|
</EdfsWrap> |
|
|
|
<div class="flex-1 p-4 h-full overflow-hidden relative" |
|
|
|
<div class="flex-1 p-4 h-full overflow-hidden relative"> |
|
|
|
> |
|
|
|
|
|
|
|
<div class="absolute w-full h-full bg-[#ffffffe5] z-99" v-if="loadingChart"> |
|
|
|
<div class="absolute w-full h-full bg-[#ffffffe5] z-99" v-if="loadingChart"> |
|
|
|
<div class="w-full h-full flex flex-col justify-center items-center"> |
|
|
|
<div class="w-full h-full flex flex-col justify-center items-center"> |
|
|
|
<el-progress |
|
|
|
<el-progress |
|
|
|
@ -47,11 +50,13 @@ |
|
|
|
status="success" |
|
|
|
status="success" |
|
|
|
/> |
|
|
|
/> |
|
|
|
<div class="text-center text-gray-700 text-lg leading-relaxed"> |
|
|
|
<div class="text-center text-gray-700 text-lg leading-relaxed"> |
|
|
|
正在加载数据，请稍等。<br> |
|
|
|
正在加载数据，请稍等。<br /> |
|
|
|
当前已查询 |
|
|
|
当前已查询 |
|
|
|
<span class="font-semibold text-green-600">{{ reqPointCount }}</span> / |
|
|
|
<span class="font-semibold text-green-600">{{ reqPointCount }}</span> / |
|
|
|
<span class="font-semibold text-blue-600">{{ pointCount }}</span> 个点位，剩余 |
|
|
|
<span class="font-semibold text-blue-600">{{ pointCount }}</span> |
|
|
|
<span class="font-semibold text-red-500">{{ remainingPointCount }}</span> 个点位。 |
|
|
|
个点位，剩余 |
|
|
|
|
|
|
|
<span class="font-semibold text-red-500">{{ remainingPointCount }}</span> |
|
|
|
|
|
|
|
个点位。 |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -70,8 +75,13 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<el-button type="primary" @click="loadChardData">查询数据</el-button> |
|
|
|
<el-button type="primary" @click="loadChardData">查询数据</el-button> |
|
|
|
查询最近 |
|
|
|
查询最近 |
|
|
|
<el-input-number :key="refreshKey" v-model="num" :min="1" :max="diffHours" |
|
|
|
<el-input-number |
|
|
|
@input="handleInput"/> |
|
|
|
:key="refreshKey" |
|
|
|
|
|
|
|
v-model="num" |
|
|
|
|
|
|
|
:min="1" |
|
|
|
|
|
|
|
:max="diffHours" |
|
|
|
|
|
|
|
@input="handleInput" |
|
|
|
|
|
|
|
/> |
|
|
|
小时 |
|
|
|
小时 |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<NewDataChart |
|
|
|
<NewDataChart |
|
|
|
@ -100,15 +110,13 @@ import { |
|
|
|
} from '@/api/module/transfer' |
|
|
|
} from '@/api/module/transfer' |
|
|
|
import { useMessage } from '@/composables/useMessage' |
|
|
|
import { useMessage } from '@/composables/useMessage' |
|
|
|
import dayjs from 'dayjs' |
|
|
|
import dayjs from 'dayjs' |
|
|
|
import { nextTick } from "vue"; |
|
|
|
import { nextTick } from 'vue' |
|
|
|
import EdfsWrap from "@/components/Edfs-wrap.vue"; |
|
|
|
import EdfsWrap from '@/components/Edfs-wrap.vue' |
|
|
|
import PointCheckbox from "@/views/stationData/component/pointCheckbox.vue"; |
|
|
|
import PointCheckbox from '@/views/stationData/component/pointCheckbox.vue' |
|
|
|
import { debounce } from 'lodash-es' |
|
|
|
import { debounce } from 'lodash-es' |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const env = import.meta.env |
|
|
|
const env = import.meta.env |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const num = ref<number>() |
|
|
|
const num = ref<number>() |
|
|
|
const diffHours = ref<number>() |
|
|
|
const diffHours = ref<number>() |
|
|
|
const refreshKey = ref(0) |
|
|
|
const refreshKey = ref(0) |
|
|
|
@ -125,34 +133,39 @@ const handleInput = debounce(async (val: number) => { |
|
|
|
} else { |
|
|
|
} else { |
|
|
|
num.value = val |
|
|
|
num.value = val |
|
|
|
} |
|
|
|
} |
|
|
|
const endTime = |
|
|
|
const endTime = curDevice.value!.end_time |
|
|
|
curDevice.value!.end_time ? |
|
|
|
? dayjs(curDevice.value!.end_time).valueOf() |
|
|
|
dayjs(curDevice.value!.end_time).valueOf() : dayjs().valueOf() |
|
|
|
: dayjs().valueOf() |
|
|
|
|
|
|
|
|
|
|
|
const startTime = dayjs(endTime).subtract(num.value, 'hour').valueOf() |
|
|
|
const startTime = dayjs(endTime).subtract(num.value, 'hour').valueOf() |
|
|
|
time.value = [dayjs(startTime).format('YYYY-MM-DD HH:mm:ss'), dayjs(endTime).format('YYYY-MM-DD HH:mm:ss')] |
|
|
|
time.value = [ |
|
|
|
|
|
|
|
dayjs(startTime).format('YYYY-MM-DD HH:mm:ss'), |
|
|
|
|
|
|
|
dayjs(endTime).format('YYYY-MM-DD HH:mm:ss'), |
|
|
|
|
|
|
|
] |
|
|
|
}, 300) |
|
|
|
}, 300) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const isShowDrawer = defineModel<boolean>() |
|
|
|
const isShowDrawer = defineModel<boolean>() |
|
|
|
const title = computed(() => |
|
|
|
const title = computed(() => |
|
|
|
( |
|
|
|
curDevice.value?.isonLine |
|
|
|
curDevice.value?.isonLine ? |
|
|
|
? '数据详情' |
|
|
|
'数据详情' : env.VITE_APP_ENV === 'local' |
|
|
|
: env.VITE_APP_ENV === 'local' |
|
|
|
? `已导出数据详情` : '已导入数据详情' |
|
|
|
? `已导出数据详情` |
|
|
|
) |
|
|
|
: '已导入数据详情' |
|
|
|
) |
|
|
|
) |
|
|
|
const message = useMessage() |
|
|
|
const message = useMessage() |
|
|
|
const PointCheckboxRef = ref<InstanceType<typeof PointCheckbox>>() |
|
|
|
const PointCheckboxRef = ref<InstanceType<typeof PointCheckbox>>() |
|
|
|
|
|
|
|
|
|
|
|
const emit = defineEmits(['on-save']) |
|
|
|
const emit = defineEmits(['on-save']) |
|
|
|
const pointList = ref<IMyPoint[]>([]) |
|
|
|
const pointList = ref<IMyPoint[]>([]) |
|
|
|
const curDevice = ref<IDevice & { isonLine: boolean, siteName: string }>() |
|
|
|
const curDevice = ref<IDevice & { isonLine: boolean; siteName: string }>() |
|
|
|
|
|
|
|
|
|
|
|
async function open(device: IDevice & { |
|
|
|
async function open( |
|
|
|
isonLine: boolean, |
|
|
|
device: IDevice & { |
|
|
|
siteName: string |
|
|
|
isonLine: boolean |
|
|
|
}, group: IPointGroupOV) { |
|
|
|
siteName: string |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
group: IPointGroupOV |
|
|
|
|
|
|
|
) { |
|
|
|
curDevice.value = device |
|
|
|
curDevice.value = device |
|
|
|
currentGroup.value = group |
|
|
|
currentGroup.value = group |
|
|
|
onCollapse(false) |
|
|
|
onCollapse(false) |
|
|
|
@ -179,7 +192,7 @@ async function open(device: IDevice & { |
|
|
|
} |
|
|
|
} |
|
|
|
const start = dayjs(deviceOff.start_time) |
|
|
|
const start = dayjs(deviceOff.start_time) |
|
|
|
const end = dayjs(deviceOff.end_time) |
|
|
|
const end = dayjs(deviceOff.end_time) |
|
|
|
diffHours.value = end.diff(start, "hour") + 1; |
|
|
|
diffHours.value = end.diff(start, 'hour') + 1 |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const selectValue = ref() |
|
|
|
const selectValue = ref() |
|
|
|
@ -188,14 +201,15 @@ function onchangeSelect(value: string) { |
|
|
|
PointCheckboxRef.value?.clearCheck() |
|
|
|
PointCheckboxRef.value?.clearCheck() |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const loadingPoints = ref(false) |
|
|
|
const loadingPoints = ref(false) |
|
|
|
const columParams = computed(() => ['ts', ...checkPointList.value.map(i => i.addr)]) |
|
|
|
const columParams = computed(() => ['ts', ...checkPointList.value.map(i => i.addr)]) |
|
|
|
|
|
|
|
|
|
|
|
const currentGroup = ref<IPointGroupOV & { |
|
|
|
const currentGroup = ref< |
|
|
|
customNode?: boolean |
|
|
|
IPointGroupOV & { |
|
|
|
brother?: Array<any> |
|
|
|
customNode?: boolean |
|
|
|
}>() |
|
|
|
brother?: Array<any> |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
>() |
|
|
|
|
|
|
|
|
|
|
|
async function loadPoints() { |
|
|
|
async function loadPoints() { |
|
|
|
if (!currentGroup.value) { |
|
|
|
if (!currentGroup.value) { |
|
|
|
@ -251,25 +265,19 @@ async function loadDeviceDetails() { |
|
|
|
|
|
|
|
|
|
|
|
const chartData = reactive(new Map<string, any[]>()) |
|
|
|
const chartData = reactive(new Map<string, any[]>()) |
|
|
|
const axisData = new Set<string>() |
|
|
|
const axisData = new Set<string>() |
|
|
|
const legends = ref<{ |
|
|
|
const legends = ref< |
|
|
|
addr: string; label: string, unit: string, coefficient?: string | number |
|
|
|
|
|
|
|
operator?: string |
|
|
|
|
|
|
|
}[]>([]) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function onChangeCoefficient( |
|
|
|
|
|
|
|
{ |
|
|
|
{ |
|
|
|
id, |
|
|
|
addr: string |
|
|
|
coefficient, |
|
|
|
label: string |
|
|
|
operator, |
|
|
|
unit: string |
|
|
|
}: { |
|
|
|
coefficient?: string | number |
|
|
|
id: string |
|
|
|
}[] |
|
|
|
coefficient: string |
|
|
|
>([]) |
|
|
|
operator: string |
|
|
|
|
|
|
|
}) { |
|
|
|
function onChangeCoefficient({ id, coefficient }: { id: string; coefficient: string }) { |
|
|
|
const find = legends.value.findIndex(r => r.addr === id) |
|
|
|
const find = legends.value.findIndex(r => r.addr === id) |
|
|
|
if (find !== -1) { |
|
|
|
if (find !== -1) { |
|
|
|
legends.value[find].coefficient = coefficient |
|
|
|
legends.value[find].coefficient = coefficient |
|
|
|
legends.value[find].operator = operator |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
@ -279,7 +287,6 @@ const chartLimit = ref(1000) |
|
|
|
const chartOffset = ref(0) |
|
|
|
const chartOffset = ref(0) |
|
|
|
const progress = ref(0) |
|
|
|
const progress = ref(0) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const pointCount = computed(() => chartAllTotal.value * checkPointList.value.length) |
|
|
|
const pointCount = computed(() => chartAllTotal.value * checkPointList.value.length) |
|
|
|
const reqPointCount = ref(0) |
|
|
|
const reqPointCount = ref(0) |
|
|
|
|
|
|
|
|
|
|
|
@ -303,7 +310,9 @@ async function loadChardData() { |
|
|
|
columns: columParams.value, |
|
|
|
columns: columParams.value, |
|
|
|
isLocal: !curDevice.value?.isonLine, |
|
|
|
isLocal: !curDevice.value?.isonLine, |
|
|
|
host: curDevice.value?.isonLine ? (curDevice.value as IOnlineDevice).clientIp : '', |
|
|
|
host: curDevice.value?.isonLine ? (curDevice.value as IOnlineDevice).clientIp : '', |
|
|
|
name: currentGroup.value?.customNode ? selectValue.value : currentGroup.value?.name as string, |
|
|
|
name: currentGroup.value?.customNode |
|
|
|
|
|
|
|
? selectValue.value |
|
|
|
|
|
|
|
: (currentGroup.value?.name as string), |
|
|
|
startTime: time.value[0], |
|
|
|
startTime: time.value[0], |
|
|
|
endTime: time.value[1], |
|
|
|
endTime: time.value[1], |
|
|
|
} |
|
|
|
} |
|
|
|
@ -316,7 +325,7 @@ async function loadChardData() { |
|
|
|
const params: IGetDeviceDataParams = { |
|
|
|
const params: IGetDeviceDataParams = { |
|
|
|
...options, |
|
|
|
...options, |
|
|
|
limit, |
|
|
|
limit, |
|
|
|
offset |
|
|
|
offset, |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
loadingChart.value = true |
|
|
|
loadingChart.value = true |
|
|
|
@ -352,7 +361,7 @@ async function loadChardData() { |
|
|
|
const params: IGetDeviceDataParams = { |
|
|
|
const params: IGetDeviceDataParams = { |
|
|
|
...options, |
|
|
|
...options, |
|
|
|
limit, |
|
|
|
limit, |
|
|
|
offset: i * Number(limit) |
|
|
|
offset: i * Number(limit), |
|
|
|
} |
|
|
|
} |
|
|
|
const res = await getDeviceDetails(params) |
|
|
|
const res = await getDeviceDetails(params) |
|
|
|
chartAllTotal.value = res?.data?.total ?? 0 |
|
|
|
chartAllTotal.value = res?.data?.total ?? 0 |
|
|
|
@ -370,7 +379,6 @@ async function loadChardData() { |
|
|
|
resetChartStatus() |
|
|
|
resetChartStatus() |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function setChartData(pointData: any[]) { |
|
|
|
function setChartData(pointData: any[]) { |
|
|
|
for (const addr of columParams.value.filter(i => i !== 'ts')) { |
|
|
|
for (const addr of columParams.value.filter(i => i !== 'ts')) { |
|
|
|
const label = pointList.value.find(i => i.addr === addr)?.label || addr |
|
|
|
const label = pointList.value.find(i => i.addr === addr)?.label || addr |
|
|
|
@ -399,10 +407,8 @@ function setChartData(pointData: any[]) { |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
}) |
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function handleBeforeClose(done: () => void) { |
|
|
|
function handleBeforeClose(done: () => void) { |
|
|
|
time.value = undefined |
|
|
|
time.value = undefined |
|
|
|
isShowDrawer.value = false |
|
|
|
isShowDrawer.value = false |
|
|
|
@ -470,9 +476,12 @@ const disabledDate = (time: any) => { |
|
|
|
console.log('disableDate error', e) |
|
|
|
console.log('disableDate error', e) |
|
|
|
return current.isAfter(dayjs(), 'day') |
|
|
|
return current.isAfter(dayjs(), 'day') |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
const getBeforeMonth = dayjs().startOf('month').subtract(1, 'month').startOf('month').toDate() |
|
|
|
const getBeforeMonth = dayjs() |
|
|
|
|
|
|
|
.startOf('month') |
|
|
|
|
|
|
|
.subtract(1, 'month') |
|
|
|
|
|
|
|
.startOf('month') |
|
|
|
|
|
|
|
.toDate() |
|
|
|
const collapsed = ref(false) |
|
|
|
const collapsed = ref(false) |
|
|
|
|
|
|
|
|
|
|
|
function onCollapse(value?: boolean) { |
|
|
|
function onCollapse(value?: boolean) { |
|
|
|
|
