single_line dlg

gerson

2024-07-27 e970a262bdc8c62e157dedd6a95047682eef66ec

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<template>
    <el-dialog :destroy-on-close="true" v-model="isShow" draggable :close-on-click-modal="false" :title="chartValues?.title">
        <RecordSet chartHeight="30rem" ref="recordSetRef" :data="chartValues">
            <TimeRange class="flex-0 m-1" @change="timeRangeChange" />
            <List class="flex-0 m-1" v-model="stepTime" :data="listData" @change="selectStepChange" />
        </RecordSet>
    </el-dialog>
</template>
 
<script setup lang="ts">
import { nextTick, ref, watch } from 'vue';
import RecordSet from './RecordSet.vue';
import { queryScadaTimeValues } from '/@/api/ai/chat';
import { useCompRef } from '/@/utils/types';
import { getRecentDateRange } from '/@/utils/util';
import { formatDate } from '/@/utils/formatTime';
import TimeRange from './components/TimeRange.vue';
import List from './components/List.vue';
 
const props = defineProps(['otype', 'oname','indexName']);
 
const isShow = defineModel({
    type: Boolean,
});
 
const recordSetRef = useCompRef(RecordSet);
 
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) => {
    queryRange.value = val;
    setChartData(queryRange.value);
};
 
const selectStepChange = (val) => {
    setChartData(queryRange.value);
};
const stepTime = ref('5 minutes');
const chartValues = ref(null);
const setChartData = async (timeRange: string[]) => {
    const res = await queryScadaTimeValues({
        // 设备类型
        ptype: props.otype,
        // 设备名称
        pname: props.oname,
        otype:props.indexName,
        start_time: timeRange[0],
        end_time: timeRange[1],
        step_time: stepTime.value,
    });
    chartValues.value = res.values;
    chartValues.value.chart = 'single_line'
    nextTick(()=>{
        recordSetRef.value.drawChart();
    })
};
 
watch(
    () => isShow.value,
    (val) => {
        if (!val) {
            return;
        }
        queryRange.value = getRecentDateRange(1).map((item) => formatDate(item));
        setChartData(queryRange.value);
    }
);
</script>
<style scoped lang="scss"></style>