<template>
|
<el-dialog
|
:destroy-on-close="true"
|
v-model="isShow"
|
draggable
|
:close-on-click-modal="false"
|
:title="chartValues?.title"
|
v-if="computedIsDialog"
|
>
|
<RecordSet :chartHeight="computedHeight" :tableHeight="tableHeight" ref="recordSetRef" :data="chartValues">
|
<TimeRange ref="timeRangeRef" v-model="queryRange" class="flex-0 m-1" @change="timeRangeChange" />
|
<!-- <List class="flex-0 m-1" v-model="stepTime" :data="listData" @change="selectStepChange" /> -->
|
</RecordSet>
|
</el-dialog>
|
<div v-else v-show="isShow">
|
<RecordSet :chartHeight="computedHeight" :tableHeight="tableHeight" ref="recordSetRef" :data="chartValues">
|
<TimeRange ref="timeRangeRef" v-model="queryRange" class="flex-0 m-1" @change="timeRangeChange" />
|
</RecordSet>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { computed, nextTick, ref, watch } from 'vue';
|
import RecordSet from './RecordSet.vue';
|
import List from './components/List.vue';
|
import TimeRange from './components/TimeRange.vue';
|
import { queryScadaTimeValues } from '/@/api/ai/chat';
|
import { formatDate } from '/@/utils/formatTime';
|
import { useCompRef } from '/@/utils/types';
|
import { getRecentDateRange } from '/@/utils/util';
|
import service from '/@/utils/request';
|
|
const props = defineProps(['isDialog', 'height', 'metrics', 'tableHeight', 'metricsInfo', 'lastValueItem']);
|
// SDVAL_FULL_FLOW true 25 DEV_FLOW_W
|
|
const computedIsDialog = computed(() => props.isDialog ?? true);
|
const computedHeight = computed(() => props.height ?? '30rem');
|
|
const isShow = defineModel({
|
type: Boolean,
|
});
|
|
const recordSetRef = useCompRef(RecordSet);
|
const timeRangeRef = useCompRef(TimeRange);
|
|
const listData = {
|
list: [
|
{ title: '5分钟', value: '5 minutes' },
|
{ title: '10分钟', value: '10 minutes' },
|
{ title: '半小时', value: '30 minutes' },
|
{ title: '1小时', value: '1 hours' },
|
{ title: '1天', value: '1 days' },
|
],
|
type: 'list',
|
title: '时长',
|
value: '5 minutes',
|
} as any;
|
|
const queryRange = ref<string[]>(null);
|
const timeRangeChange = (val) => {
|
setChartData();
|
};
|
|
const selectStepChange = (val) => {
|
setChartData();
|
};
|
const stepTime = ref('5 minutes');
|
const chartValues = ref(null);
|
const setChartData = async () => {
|
let url = '';
|
if (computedIsDialog.value) {
|
const otype = props.metricsInfo.id;
|
const oname = props.lastValueItem[otype]?.ONAME;
|
const queryId = props.metricsInfo.query_detail_id;
|
url = `chat/query_detail_values?query_id=${queryId}&otype=${otype}&oname=${oname}`;
|
} else {
|
url = props.metrics.url;
|
}
|
let res = await service({
|
url: url,
|
method: 'post',
|
data: {
|
start_time: timeRangeRef.value.formatDateValue[0],
|
end_time: timeRangeRef.value.formatDateValue[1],
|
step_time: stepTime.value,
|
},
|
});
|
if (!computedIsDialog.value) {
|
res = {
|
json_ok: res.json_ok,
|
values: {
|
title: props.metrics.title,
|
values: res.values,
|
cols: [
|
{
|
title: '时间',
|
type: 'time',
|
},
|
{
|
title: '值',
|
type: 'value',
|
},
|
],
|
},
|
};
|
} else {
|
res = {
|
json_ok: res.json_ok,
|
values: {
|
title: props.lastValueItem.OTITLE,
|
values: res.values,
|
cols: [
|
{
|
title: '时间',
|
type: 'time',
|
},
|
{
|
title: '值',
|
type: 'value',
|
},
|
],
|
},
|
};
|
if (props.metricsInfo.unit) {
|
res.values.unit = props.metricsInfo.unit;
|
}
|
}
|
chartValues.value = res.values;
|
chartValues.value.chart = 'single_line';
|
|
nextTick(() => {
|
setTimeout(() => {
|
if (recordSetRef.value.isMultiCompare) {
|
recordSetRef.value.handleData();
|
recordSetRef.value.handleMultiCompare();
|
} else {
|
recordSetRef.value.drawChart();
|
}
|
}, 0);
|
});
|
};
|
|
watch(
|
() => isShow.value,
|
(val) => {
|
if (!val) {
|
recordSetRef.value?.clearChart();
|
return;
|
}
|
queryRange.value = getRecentDateRange(1).map((item) => formatDate(item));
|
nextTick(() => {
|
setChartData();
|
});
|
},
|
{
|
immediate: true,
|
}
|
);
|
</script>
|
<style scoped lang="scss"></style>
|
