slibra-module-web/src/views/analyse/WaterView.vue

<script setup lang="jsx">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { NTabs, NTab } from 'naive-ui';
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 { waterApi } from '@/api/water';
import { CustomModal } from "./components";

import { useInfinite } from '@/composables/useInfinite';
import { useRecommend } from '@/composables/useRecommend';
import { useFetchStream } from '@/composables/useFetchStream';
import { useScroll } from '@/composables/useScroll';
import { SIMULATE_ENUM } from './components/config';

const { recommendList } = useRecommend({type: 1});
const { scrollRef, scrollToTop, scrollToBottom, scrollToBottomIfAtBottom } = useScroll();
const { refetch, cancelFetch } = useFetchStream("/grpc/decisionStream", { methdos: 'POST' }, false);
const { recordList, isFetching, onScrolltolower, onRestore } = useInfinite('/front/bigModel/warning/pageList', { type: 0, warningStatus: 0 });

const router = useRouter();
const chatStore = useChatStore();

// 回答列表
const answerResult = ref([]);
// 获取最终回答流数据参数
const flowParams = {
  feedback: '',
  category: '',
  warningId: '',
  simulate: '{}'
};

const answerLoading = ref(false);

const textDataSources = ref(null);

// 进出水数据
const jsTableData = ref([]);
const csTableData = ref([]);

const visible = ref(false);

const modalData = ref({});

const renderRowDom = ({ row, key }) => {
  const { exceed, value } = row[key] || {};
  const cls = exceed ? 'text-[#F44C49] font-bold' : 'text-[1A2029]'
  return (<span class={ cls }>{truncateDecimals(value)} {exceed && <i>↑</i>}</span>)
} 

const columns = [
  {
    title: '流量(m³/h)',
    key: 'name',
    titleAlign: 'center',
    align: 'center',
    className: 'small',
    width: '80px',
    render: (row) => renderRowDom({ row, key: '流量' })
  },
  {
    title: 'COD(mg/L)',
    key: 'small',
    titleAlign: 'center',
    align: 'center',
    className: 'small',
    width: '80px',
    render: (row) => renderRowDom({ row, key: 'COD' })
  },
  {
    title: 'TN(mg/L)',
    key: 'address',
    titleAlign: 'center',
    align: 'center',
    className: 'small',
    width: '80px',
    render: (row) => renderRowDom({ row, key: 'TN' })
  },
  {
    title: 'NH3-N(mg/L)',
    key: 'tags',
    titleAlign: 'center',
    align: 'center',
    className: 'small',
    width: '80px',
    render: (row) => renderRowDom({ row, key: 'NH3-N' })
  },
  {
    title: 'TP(mg/L)',
    key: 'COD',
    titleAlign: 'center',
    align: 'center',
    className: 'small',
    width: '80px',
    render: (row) => renderRowDom({ row, key: 'TP' })
  },
  {
    title: 'SS(mg/L)',
    key: '流量',
    titleAlign: 'center',
    align: 'center',
    className: 'age',
    width: '78px',
    render: (row) => renderRowDom({ row, key: 'SS' })
  }
]

const handleModelVisible = () => {
  visible.value = true;
} 

const resetConfiguration = () => {
  /**
   * 临时这样，后续统一处理
   * */ 
  textDataSources.value = '';
  answerLoading.value = false;
  answerResult.value = [];
  flowParams.feedback = '';
  flowParams.category = '';
  flowParams.warningId = '';
  flowParams.simulate = '{}';
  cancelFetch();
}

/**
 * 报警详情
*/
const handleOpenContent = async ({ id, category }) => {

  if ( id == flowParams.warningId ) return;
  
  flowParams.category = category;
  flowParams.warningId = id;
  flowParams.feedback = '';
  flowParams.simulate = '{}';
  answerLoading.value = false;
  cancelFetch();

  const { data } = await waterApi.getWaringDetails(id);
  const res = await waterApi.getWaringForecast(id);

  const showVal = JSON.parse(data.showVal);
  const { basic, jsData, csData } = showVal;
  const answer = JSON.parse(data.answer);
 
  cancelFetch();

  answerResult.value = [];

  const reportList = [];
  const alertList = [];

  answer.map(item => {

    const answerObjItem = JSON.parse( item );

    if ( answerObjItem.biz === "DECISION_REPORT" ) {
      reportList.push(answerObjItem.message);

      // const answerContent = answer.map(item => {
      //   const itemParse = JSON.parse(item); 
      //   return itemParse.message;
      // }).join("");

      // answerResult.value.push({
      //   biz: 'DECISION_REPORT',
      //   answer: answerContent,
      //   loading: false,
      //   delayLoading: false
      // })
    }

    if( answerObjItem.biz === "DECISION_ALERT" ) {
      alertList.push(item);
      // const [ parseAnswer ] = answer.map(item => {
      //   const result = JSON.parse( item );
      //   result.message = Object.keys(result.message).map(key => ({ ...result.message[key], isActive: null }));
      //   return result;
      // })

      // answerResult.value.push({
      //   biz: 'DECISION_ALERT',
      //   loading: false,
      //   delayLoading: false,
      //   isAllSelect: false,
      //   list: parseAnswer?.message
      // })
    }

    if (answerObjItem.biz === "DECISION_SIMULATE") {
      


      // const usefulkeys = ['on', 'off'];
      // const resultObj = {};

      // usefulkeys.forEach(key => {
      //   const tempArr = data[key];

      //   resultObj[key] = tempArr.map(item => {
      //     return {
      //       ...item,
      //       label: SIMULATE_ENUM[item.name],
      //       inpVal: Array.isArray( item.value ) ? item.value.join() : item.value,
      //       errMsg: ''
      //     }
      //   })
      // })
    }

  })

  if ( reportList.length ) {
    const answerContent = reportList.join("");
    answerResult.value.push({
      biz: 'DECISION_REPORT',
      answer: answerContent,
      loading: false,
      delayLoading: false
    })
  }

  if ( alertList.length ) {
    const [ parseAnswer ] = alertList.map(item => {
      const result = JSON.parse( item );
      result.message = Object.keys(result.message).map(key => ({ ...result.message[key], isActive: null }));
      return result;
    })
    answerResult.value.push({
      biz: 'DECISION_ALERT',
      loading: false,
      delayLoading: false,
      isAllSelect: false,
      list: parseAnswer?.message
    })
  }

  // console.log( "reportList", reportList );
  // console.log( "alertList", alertList );
  // const [ answerStrItem ] = answer;
  // const answerObjItem = JSON.parse( answerStrItem );




  // console.log( "answerObjItem", answer, JSON.parse(answerObjItem.message) );
  const textWhiteList = [
    { label: '报警时间', realKey: '报警时间', value: '', isWarning: false },
    { label: '报警值',   realKey: '报警值', value: 'mg/L', isWarning: true },
    { label: '管控值',   realKey: '管控值', value: 'mg/L', isWarning: false },
    { label: '标准值',   realKey: '标准值', value: 'mg/L', isWarning: false },
    { label: '报警级别', realKey: '告警级别', value: '', isWarning: false },
    { label: '报警次数', realKey: '报警次数', value: '', isWarning: false },
    { label: '数据来源', realKey: '数据来源', value: '', isWarning: false },
    { label: '状态',     realKey: '状态', value: '', isWarning: false }
  ]

  basic['数据来源'] = '在线仪表';

  textDataSources.value = format.textSorting(basic, textWhiteList);

  jsTableData.value = [jsData];
  csTableData.value = [csData];

  scrollToTop();
}

const onChangeTabs = warningStatus => {
  resetConfiguration();
  onRestore({ warningStatus });
}

// 生成流数据
const onRegenerate = async () => {
  
  answerLoading.value = true;

  const len = answerResult.value.length ? answerResult.value.length : 0;

  const tempReport = { 
    biz: 'DECISION_REPORT',
    answer: '',
    loading: true,
    delayLoading: true,
  };

  let tempSimulate = null;

  answerLoading.value = answerResult.value[len -1 ].biz !== 'DECISION_TABLE';

  const params = {
    body: JSON.stringify(flowParams),
    errorHandler: () => {
      
    },
    successHandler: data => {

      const item = JSON.parse(data);

      answerLoading.value = false;

      if (item.biz === 'DECISION_REPORT') {
        tempReport.answer += item.message;
        tempReport.delayLoading = false;
        answerResult.value[len] = { ...tempReport };
      }
      
      if (item.biz === 'DECISION_ALERT') {
        const list = Object.keys(item.message).map(key => ({ ...item.message[key], isActive: null }));
   
        answerResult.value.push({
          biz: 'DECISION_ALERT',
          loading: true,
          delayLoading: false,
          isAllSelect: false,
          list
        })
      }

      if (item.biz === 'DECISION_SIMULATE') {
        const lastAnswerItem = answerResult.value[len - 1];

        if ( lastAnswerItem.biz === 'DECISION_TABLE' ) {
          answerResult.value[len - 1] = {
            ...lastAnswerItem,
            content: JSON.parse(item.message).pred.join(", ")
          }
        } else {
          const { off, on, pred } = JSON.parse(item.message);
          tempSimulate = {
            biz: 'DECISION_SIMULATE',
            off,
            on,
            pred,
            isDisable: false
          }
          modalData.value = tempSimulate;
        }
      }

      scrollToBottomIfAtBottom();
    }
  }

  try {
    await refetch(params);

    const answerItem = answerResult.value[answerResult.value.length - 1];
    if (answerItem?.biz) {
      answerItem.loading = false;
      answerItem.delayLoading = false;

      if (answerItem.biz === 'DECISION_TABLE') {
        scrollToBottom()
      }
    }
    if (tempSimulate) {
      answerResult.value.push(tempSimulate);
    }
    
    setTimeout(() => {
      scrollToBottomIfAtBottom();
    }, 500)
  }
  catch(error) {
    console.log("exist error .....", error);
  }
}

// 回答选项点击
const handlerAlertOptions = (item, val, index) => {
  const { list, isAllSelect } = item;

  if ( isAllSelect ) return;

  val.isActive = index;

  const isExists = list.find(({ isActive }) => isActive === null);

  if ( !isExists ) {
    item.isAllSelect = true; 

    const result = item.list
    .map(({ id, options, isActive }) => ({ [id]: options[isActive] }))
    .reduce((accumulator, currentValue) => {
      Object.keys(currentValue).forEach(key => accumulator[key] = currentValue[key]);
      return accumulator;
    }, {});
    flowParams.feedback = JSON.stringify(result);

    onRegenerate();
  }
}

// 开始预测
const handleSendSimulate = ({ simulate, table }) => {
  const len = answerResult.value.length;

  flowParams.simulate = simulate;
  answerResult.value[len - 1].isDisable = true;

  answerResult.value.push({
    biz: 'DECISION_TABLE',
    loading: true,
    delayLoading: false,
    table,
    isDisable: false
  })

  onRegenerate();
}

// 欢迎页提交
const handleWelcomeRecommend = question => {
  chatStore.setChatQuestion(question);
  router.push('/answer');
}
</script>

<template>
  <section class="flex items-start h-full" id="warning">
    <TheSubMenu title="水质报警" @scrollToLower="onScrolltolower" :loading="isFetching">
      <template #top>
        <div class="border-[#DAE5ED]">
          <n-tabs type="line" justify-content="space-evenly">
            <n-tab name="oasis" tab="正在报警" @click="onChangeTabs(0)"></n-tab>
            <n-tab name="thebeatles" tab="历史报警" @click="onChangeTabs(1)"></n-tab>
          </n-tabs>
        </div>
      </template>

      <div class="px-[12px] py-[14px] text-[#5e5e5e]">
        <div class="grid grid-cols-1 gap-[12px]">
          <RecodeSquareCardItem
            v-for="item in recordList"
            :key="item.id"
            :item="item"
            @on-click="handleOpenContent"
          />
        </div>
      </div>
    </TheSubMenu>

    <TheChatView ref="scrollRef" :is-footer="false">
      <ChatWelcome title="您好,我是LibraAI工艺管控助手" card-title="常见处理方案："
        :sub-title="[
          '水质报警功能针对五大核心指标实时监测，发现异常后将推送给相关人员决策方案',
          '报警时间为每小时警报，请大家及时处理'
        ]" 
        :card-content="recommendList"
        @on-click="handleWelcomeRecommend"
        v-if="!textDataSources"
      />

      <ChatBaseCard v-if="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>
          </dl>
          <div class="table-inner">
            <div class="warning-table mb-[8px]">
              <div class="title">
                <span>当前进水数据：</span>
              </div>
              <div class="main">
                <BaseTable :columns="columns" :data="jsTableData"></BaseTable>
              </div>
            </div>
            <div class="warning-table">
              <div class="title">
                <span>当前出水数据：</span>
              </div>
              <div class="main">
                <BaseTable :columns="columns" :data="csTableData"></BaseTable>
              </div>
            </div>
          </div>
        </div>
      </ChatBaseCard>
  
      <section v-for="item,index in answerResult" :key="index">
        <template v-if="item.biz === 'DECISION_REPORT'">
          <ChatAnswer
            :loading="item.loading"
            :delay-loading="item.delayLoading"
            :toggleVisibleIcons="false"
            :content="item.answer"
          ></ChatAnswer>
        </template>
        
        <template v-if="item.biz === 'DECISION_ALERT'">
          <ChatBaseCard
            :loading="item.loading"
            :delay-loading="item.delayLoading"
            :toggleVisibleIcons="false"
          >
            <p class="mb-[15px] font-bold text-[#1A2029]">需要确定以下问题，完成决策方案：</p>
            <ul class="radio-wrapper space-y-[14px]">
              <li class="flex items-center" v-for="val,i in item.list" :key="i">
                <p class="mr-[14px]">{{ val.mainContent }}</p>
                <p class="radio-btn-group space-x-[14px]">
                  <span
                    v-for="option,index in val.options"
                    :class="['radio-btn', { active: val.isActive === index }]"
                    @click="handlerAlertOptions(item, val, index)"
                  >{{ option }}</span>
                </p>
              </li>
            </ul>
          </ChatBaseCard>
        </template>

        <template v-if="item.biz === 'DECISION_SIMULATE'">
          <button class="
            px-[30px] py-[10px] mb-[20px]
            rounded-[8px] 
            bg-white text-[13px] 
            text-[#5E5E5E] hover:text-[#2454FF]"
            :disabled="item.isDisable"
            @click="handleModelVisible"
          >
            水质预测推演
          </button>
        </template>
        
        <template v-if="item.biz === 'DECISION_TABLE'">
          <ChatAnswer
            :loading="item.loading"
            :delay-loading="item.delayLoading"
            :toggleVisibleIcons="false"
          >
            <div class="markdown-body text-[15px] break-all">
              <strong class="block mb-[16px]">推荐指标调整：</strong>
              <table>
                <thead>
                  <tr>
                    <th v-for="text in item.table.header" :key="text">{{ text }}</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td v-for="text in item.table.body" :key="text">{{ text }}</td>
                  </tr>
                </tbody>
              </table>
              <strong class="block mb-[16px]">预测推演结果：</strong>
              <span>未来三小时好氧池硝酸盐预测结果：{{ item.content }}</span>
            </div>
          </ChatAnswer>
          <button class="
            px-[30px] py-[10px] mb-[20px]
            rounded-[8px] 
            bg-white text-[13px] 
            text-[#5E5E5E] hover:text-[#2454FF]"
            :disabled="item.isDisable"
            @click="handleModelVisible"
          >
            水质预测推演
          </button>
        </template>
      </section>

      <ChatAnswer
        :loading="answerLoading"
        :delay-loading="answerLoading"
        :toggleVisibleIcons="false"
        v-show="answerLoading"
        loadingText="内容生成中，大概需要50秒..."
      ></ChatAnswer>
    </TheChatView>
  </section>
  <CustomModal
    v-model:visible="visible"
    :current-data="modalData"
    @on-submit="handleSendSimulate"
    ></CustomModal>

</template>