From b06665e8c149df1273bf190313190bfa3de722e8 Mon Sep 17 00:00:00 2001
From: gerson <1405270578@qq.com>
Date: 星期六, 27 七月 2024 12:31:15 +0800
Subject: [PATCH] 監測點擊出曲綫
---
src/api/ai/chat.ts | 13 ++++
src/components/chat/chatComponents/summaryCom/components/recordSet/RecordSet.vue | 54 +++++++++++------
src/utils/types.ts | 8 ++
src/components/chat/chatComponents/summaryCom/components/deviceLastValue/DeviceLastValueCom.vue | 14 ++++
src/components/chat/chatComponents/summaryCom/components/recordSet/RecordSetDialog.vue | 75 +++++++++++++++++++++++++
src/components/chat/chatComponents/summaryCom/components/deviceLastValue/MonitorContent.vue | 4 +
6 files changed, 148 insertions(+), 20 deletions(-)
diff --git a/src/api/ai/chat.ts b/src/api/ai/chat.ts
index 0db2c88..4fe194f 100644
--- a/src/api/ai/chat.ts
+++ b/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',
+ },
+ });
+};
diff --git a/src/components/chat/chatComponents/summaryCom/components/deviceLastValue/DeviceLastValueCom.vue b/src/components/chat/chatComponents/summaryCom/components/deviceLastValue/DeviceLastValueCom.vue
index 8ded22a..0ea0bf1 100644
--- a/src/components/chat/chatComponents/summaryCom/components/deviceLastValue/DeviceLastValueCom.vue
+++ b/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;
diff --git a/src/components/chat/chatComponents/summaryCom/components/deviceLastValue/MonitorContent.vue b/src/components/chat/chatComponents/summaryCom/components/deviceLastValue/MonitorContent.vue
index 59589b1..abb685b 100644
--- a/src/components/chat/chatComponents/summaryCom/components/deviceLastValue/MonitorContent.vue
+++ b/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: {
diff --git a/src/components/chat/chatComponents/summaryCom/components/recordSet/RecordSet.vue b/src/components/chat/chatComponents/summaryCom/components/recordSet/RecordSet.vue
index 11067e0..660a252 100644
--- a/src/components/chat/chatComponents/summaryCom/components/recordSet/RecordSet.vue
+++ b/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>
diff --git a/src/components/chat/chatComponents/summaryCom/components/recordSet/RecordSetDialog.vue b/src/components/chat/chatComponents/summaryCom/components/recordSet/RecordSetDialog.vue
new file mode 100644
index 0000000..6f21cbb
--- /dev/null
+++ b/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>
diff --git a/src/utils/types.ts b/src/utils/types.ts
index c041822..ffbf5b9 100644
--- a/src/utils/types.ts
+++ b/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>>();
\ No newline at end of file
--
Gitblit v1.9.3