|
|
@@ -1,18 +1,19 @@
|
|
|
<script setup>
|
|
|
-import { ref } from 'vue';
|
|
|
+import { onMounted, ref } from 'vue';
|
|
|
import { useRouter } from 'vue-router';
|
|
|
import { NTabs, NTab } from 'naive-ui';
|
|
|
+import * as G2Plot from '@antv/g2plot';
|
|
|
import { useChatStore } from '@/stores/modules/chatStore';
|
|
|
import { BaseTable, ChatWelcome, RecodeSquareCardItem, TheSubMenu, TheChatView } from "@/components";
|
|
|
import { ChatBaseCard, ChatAnswer } from '@/components/Chat';
|
|
|
-import { format, truncateDecimals } from "@/utils/format";
|
|
|
+import { formatToData } from "@/utils/format";
|
|
|
import { waterApi } from '@/api/water';
|
|
|
-import {useInfinite, useRecommend, useScroll} from '@/composables'
|
|
|
+import { useInfinite, useRecommend, useScroll } from '@/composables'
|
|
|
import { columns } from './config';
|
|
|
|
|
|
-const { recommendList } = useRecommend({ type: 2 });
|
|
|
+const { recommendList } = useRecommend({ type: 3 });
|
|
|
const { scrollRef, scrollToTop } = useScroll();
|
|
|
-const { recordList, isFetching, onScrolltolower, onRestore } = useInfinite('/front/bigModel/warning/pageList', { type: 1, warningStatus: 0 });
|
|
|
+const { recordList, isFetching, onScrolltolower, onRestore } = useInfinite('/front/bigModel/warning/pageList', { type: 2, warningStatus: 0 });
|
|
|
|
|
|
const router = useRouter();
|
|
|
const chatStore = useChatStore();
|
|
|
@@ -20,6 +21,8 @@ const chatStore = useChatStore();
|
|
|
const answerResult = ref("");
|
|
|
const textDataSources = ref(null);
|
|
|
|
|
|
+const chart = ref({});
|
|
|
+
|
|
|
// 进出水数据
|
|
|
const jsTableData = ref([]);
|
|
|
const csTableData = ref([]);
|
|
|
@@ -30,10 +33,108 @@ const onChangeTabs = warningStatus => {
|
|
|
textDataSources.value = '';
|
|
|
onRestore({ warningStatus })
|
|
|
}
|
|
|
+
|
|
|
+// 打开详情
|
|
|
+const handleOpenContent = async ({ id, reason: title }) => {
|
|
|
+ const { data } = await waterApi.getWaringDetails(id);
|
|
|
+ const showVal = JSON.parse(data.showVal);
|
|
|
+ const { basic, jsData, csData, chartsData } = showVal;
|
|
|
+ console.log(chartsData);
|
|
|
+ answerResult.value = data.answer;
|
|
|
+
|
|
|
+ basic.title = title
|
|
|
+ textDataSources.value = formatToData(basic, '预测值');
|
|
|
+
|
|
|
+ jsTableData.value = [jsData];
|
|
|
+ csTableData.value = [csData];
|
|
|
+
|
|
|
+
|
|
|
+ scrollToTop();
|
|
|
+}
|
|
|
+
|
|
|
+// 创建图表
|
|
|
+const initLineChat = () => {
|
|
|
+ // chart.value = new Chart({
|
|
|
+ // container: 'chart',
|
|
|
+ // autoFit: true,
|
|
|
+ // width: 500,
|
|
|
+ // height: 300,
|
|
|
+ // })
|
|
|
+ // 准备数据
|
|
|
+ const data =
|
|
|
+ [
|
|
|
+ {
|
|
|
+ "time": "13",
|
|
|
+ "val": 11.063026
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "time": "13",
|
|
|
+ "val": 11.063026
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "time": "13",
|
|
|
+ "val": 11.063026
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "time": "13",
|
|
|
+ "val": 11.063026
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "time": "13",
|
|
|
+ "val": 11.063026
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "time": "13",
|
|
|
+ "val": 11.063026
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "time": "17",
|
|
|
+ "val": 7.52
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "time": "18",
|
|
|
+ "val": 7.8
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "time": "19",
|
|
|
+ "val": 8.44
|
|
|
+ }
|
|
|
+ ]
|
|
|
+
|
|
|
+ const lineChart = new G2Plot.Line('chartContainer', {
|
|
|
+ data,
|
|
|
+ xField: 'time', // 对应你的 x 轴字段
|
|
|
+ yField: 'val', // 对应你的 y 轴字段
|
|
|
+ animation: {
|
|
|
+ appear: {
|
|
|
+ animation: 'path-in',
|
|
|
+ duration: 5000,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ });
|
|
|
+
|
|
|
+ lineChart.render();
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+// 欢迎 - 问答
|
|
|
+const handleWelcomeRecommend = question => {
|
|
|
+ chatStore.setChatQuestion(question);
|
|
|
+ router.push('/answer');
|
|
|
+}
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ // const chart = new Chart({
|
|
|
+ // container: 'chartContainer',
|
|
|
+ // });
|
|
|
+ initLineChat();
|
|
|
+})
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
<section class="flex items-start h-full" id="warning">
|
|
|
+
|
|
|
+
|
|
|
<TheSubMenu title="预测预警" @scrollToLower="onScrolltolower" :loading="isFetching">
|
|
|
<template #top>
|
|
|
<div class="border-[#DAE5ED]">
|
|
|
@@ -54,16 +155,13 @@ const onChangeTabs = warningStatus => {
|
|
|
<ChatWelcome title="您好,我是LibraAI工艺管控助手" card-title="常见处理方案：" :sub-title="[
|
|
|
'报警分析功能具备实时监测与预警机制，检测到异常情况推送相关工作人员确保问题及时处理',
|
|
|
'报警时间为每小时警报，请大家及时处理'
|
|
|
- ]"
|
|
|
- v-if="!textDataSources"
|
|
|
- :card-content="recommendList"
|
|
|
- @on-click="handleWelcomeRecommend"
|
|
|
- />
|
|
|
- <ChatBaseCard v-if="textDataSources">
|
|
|
+ ]" v-if="!textDataSources" :card-content="recommendList" @on-click="handleWelcomeRecommend" />
|
|
|
+ <ChatBaseCard v-show="textDataSources">
|
|
|
<div class="waring-answer-wrapper">
|
|
|
<dl class="message-inner warning-info_medium ">
|
|
|
<dt class="mb-[2px] font-bold text-[#1A2029]">{{ textDataSources?.title }}</dt>
|
|
|
- <dd v-for="item, index in textDataSources?.list" :key="index"><span :class="{'text-[#F44C49]': item.isWarning}">{{ item.label }}： {{ item.value }}</span></dd>
|
|
|
+ <dd v-for="item, index in textDataSources?.list" :key="index"><span
|
|
|
+ :class="{ 'text-[#F44C49]': item.isWarning }">{{ item.label }}： {{ item.value }}</span></dd>
|
|
|
</dl>
|
|
|
<div class="table-inner">
|
|
|
<div class="warning-table mb-[8px]">
|
|
|
@@ -84,7 +182,14 @@ const onChangeTabs = warningStatus => {
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+
|
|
|
+ <div div class="pt-[40px] pb-[20px]" id="chartContainer"></div>
|
|
|
+
|
|
|
</ChatBaseCard>
|
|
|
+
|
|
|
+ <ChatAnswer :loading="false" :delay-loading="false" :toggleVisibleIcons="false" :content="answerResult"
|
|
|
+ v-if="answerResult" />
|
|
|
+
|
|
|
</TheChatView>
|
|
|
</section>
|
|
|
</template>
|
sunxiao