監測點擊出曲綫

gerson

2024-07-27 b06665e8c149df1273bf190313190bfa3de722e8

監測點擊出曲綫

 src/api/ai/chat.ts

@@ -331,3 +331,16 @@
        },
    });
};



export const queryScadaTimeValues = async (params, req: any = request) => {
    return req({
        url: 'data/query_scada_time_values',
        method: 'POST',
        data: params,
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
    });
};

 src/components/chat/chatComponents/summaryCom/components/deviceLastValue/DeviceLastValueCom.vue

@@ -53,6 +53,7 @@
                            :title="firstRow.title"
                            :type="firstRow.id"
                            :values="rowChunk"
                            @itemClick="valueClick"
                        />
                    </div>
                    <!-- å‰©ä½™è¡Œ -->
@@ -64,6 +65,7 @@
                        :title="row.title"
                        :type="row.id"
                        :values="rowChunk"
                        @itemClick="valueClick"
                    />
                </div>
            </div>
@@ -78,6 +80,7 @@
                @current-change="handleCurrentChange"
            />
        </div>
        <RecordSetDialog v-model="chartDlgIsShow" :otype="chartDlgMapRow?.OTYPE" :oname="chartDlgMapRow?.ONAME"/>
    </div>
</template>

@@ -100,6 +103,7 @@
    THIN_BORDER_WIDTH,
} from './constants';
import type { Monitor, MonitorValue } from './types';
import RecordSetDialog from '../recordSet/RecordSetDialog.vue';

const props = defineProps(chatComProps) as {
    data: Monitor;
@@ -259,6 +263,16 @@
    return chunkResult;
});

//#region ====================== ç‚¹å‡»çœ‹æ›²çº¿ ======================

const chartDlgIsShow = ref(false);
const chartDlgMapRow = ref(null);
const valueClick = (item) => {
    chartDlgMapRow.value = item;
    chartDlgIsShow.value = true;
};
//#endregion

// è®¡ç®—最大列数
// (x-1)* cellWidth + rowHeaderCellContentWidth.value+thickBorderWidth*(x-1)+thickBorderWidth*2 <= width;


 src/components/chat/chatComponents/summaryCom/components/deviceLastValue/MonitorContent.vue

@@ -24,7 +24,7 @@
                height: `${CELL_HEIGHT}px`,
            }"
        >
            <span class="cursor-pointer" @mouseover="valueMouseOver($event, item)" @mouseleave="valueMouseLeave">
            <span class="cursor-pointer" @mouseover="valueMouseOver($event, item)" @mouseleave="valueMouseLeave" @click="emit('itemClick',item,item[type])">
                {{ item[type] }}
            </span>
        </div>
@@ -64,6 +64,8 @@
import { reactive, type PropType } from 'vue';
import { BORDER_COLOR, CELL_HEIGHT, CONTENT_CELL_CLASS, ROW_HEADER_CELL_CLASS, THICK_BORDER_WIDTH } from './constants';
import type { MonitorValue } from './types';

const emit = defineEmits(['itemClick'])
const props = defineProps({
    /** @description æ ‡é¢˜ */
    title: {

 src/components/chat/chatComponents/summaryCom/components/recordSet/RecordSet.vue

@@ -1,23 +1,29 @@
<template>
    <div class="w-full">
        <div class="flex mb-4 flex-wrap" v-if="visibleParams && visibleParams.length > 0">
        <div class="flex mb-4 flex-wrap">
            <!-- TimeRange v-model è·Ÿ @change ä¸­çš„值会不一样，以@change ä¸­ä¸ºå‡† -->
            <component
                class="flex-0 m-1"
                v-model="paramsValueList[index].value"
                v-for="(item, index) in visibleParams as any"
                :key="item.id"
                :id="item.id"
                :is="recordSetMapCom[item.type]"
                :data="item"
                :originData="originData"
                @change="(val) => handleQueryChange(val, item)"
                :disabled="chartLoading"
            ></component>
            <template v-if="visibleParams && visibleParams.length > 0">
                <component
                    class="flex-0 m-1"
                    v-model="paramsValueList[index].value"
                    v-for="(item, index) in visibleParams as any"
                    :key="item.id"
                    :id="item.id"
                    :is="recordSetMapCom[item.type]"
                    :data="item"
                    :originData="originData"
                    @change="(val) => handleQueryChange(val, item)"
                    :disabled="chartLoading"
                ></component>
            </template>
            <slot>
				
            </slot>

            <YRange v-model="yRange" @input="yRangeInput" />
            <el-checkbox class="m-1" v-model="isMultiCompare" label="多日对比" @change="multiCompareChange"></el-checkbox>
        </div>
        <div class="h-[20rem]" v-resize="chartContainerResize" v-loading="chartLoading">
        <div :style="{ height: chartHeight }" v-resize="chartContainerResize" v-loading="chartLoading">
            <div ref="chartRef"></div>
        </div>
    </div>
@@ -60,6 +66,10 @@
    summaryIndex: {
        type: Number,
    },
    chartHeight: {
        type: String,
        default: '20rem',
    },
}) as {
    data: RecordSet;
};
@@ -89,7 +99,7 @@
            } else {
                newList.push(current);
            }
        }else{
        } else {
            newList.push(current);
        }
    }
@@ -192,6 +202,9 @@

const drawChart = () => {
    const data = props.data;
    if (!data || !data.cols || !data.values) {
        return;
    }
    preData = data;
    const xType = 'time';
    timeIndex = data.cols.findIndex((item) => item.type === 'time');
@@ -244,10 +257,9 @@
    let res = null;

    try {
        if(item.type===RecordSetParamsType.TimeRange){
            changeMap.set(item.range[0].id,val[0]),
            changeMap.set(item.range[1].id,val[1])
        }else{
        if (item.type === RecordSetParamsType.TimeRange) {
            changeMap.set(item.range[0].id, val[0]), changeMap.set(item.range[1].id, val[1]);
        } else {
            changeMap.set(item.id, val);
        }
        const paramsObj = {};
@@ -393,5 +405,9 @@
    }
};
//#endregion

defineExpose({
    drawChart,
});
</script>
<style scoped lang="scss"></style>

 src/components/chat/chatComponents/summaryCom/components/recordSet/RecordSetDialog.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,75 @@
<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 { 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']);

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({
        otype: props.otype,
        oname: props.oname,
        start_time: timeRange[0],
        end_time: timeRange[1],
        step_time: stepTime.value,
    });
    chartValues.value = res.values;
    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>

 src/utils/types.ts

@@ -1,4 +1,5 @@
import { isNil } from 'lodash-unified';
import { ref } from 'vue';

export const isUndefined = (val: any): val is undefined => val === undefined;
export const isBoolean = (val: any): val is boolean => typeof val === 'boolean';
@@ -9,3 +10,10 @@
};

export const isFilledArray = (val: any) => Array.isArray(val) && val.length > 0;
/**
 *
 * @param _comp ç»„件构造函数
 * @returns ç»„件 ref
 * @example const formRef = useCompRef(ElForm);
 */
export const useCompRef = <T extends abstract new (...args: any) => any>(_comp: T) => ref<InstanceType<T>>();