smartai_desk_pc/src/modules/chat-item/Answer.vue

<template>
  <div class="dialog_answer">
    <div class="answer-item">
      <div class="answer-item-icon">
        <a-dropdown @select="handleSelect" trigger="hover">
          <img :src="target_icon" alt="" class="img-icon" />
          <template #content>
            <a-doption value="1">切换头像</a-doption>
          </template>
        </a-dropdown>

        <!-- <a-tooltip content="编辑">
          <icon-edit class="edit-icon" @click="handleEditIcon" />
        </a-tooltip> -->
      </div>
      <div class="answer-item-content" v-if="chat_type === 'znwd'">
        <!-- {{ dialog.question }} -->
        <DialogContent
          id="refference_parent"
          :content="answer_html"
          :type="dialog.client_custom_item_type"
          :is_loading="is_content_loading"
          :is_think="is_think"
          :deep_loading="deep_loading"
          :deep_answer="deep_answer"
        >
          <!-- <HomeChart v-if="has_echarts"></HomeChart> -->
          <DialogActions v-if="answer_status == 2" class="answer-actions-btns" :type="type" @copy="handleAnswerCopy" />
        </DialogContent>

        <!-- 引用数据 -->
        <Reference v-if="answer_status == 2 && !has_echarts" ref="refference" :full_refference="full_refference">
        </Reference>
        <!-- {{ (has_chunks, answer_status) }} -->
        <!-- 对话已经结束，并且有引用数据 -->
      </div>
      <div class="answer-item-content" v-if="chat_type === 'bgsc'">
        <DialogReportContent
          v-if="!is_report_outline"
          :is_loading="is_content_loading"
          :type="type"
          :result_list="report_content"
          :answer_status="answer_status"
        >
          <DialogActions
            v-if="answer_status == 2"
            class="answer-actions-btns"
            :type="type"
            @copy="handleReportCopy"
            @edit="handleReportEdit"
          />
        </DialogReportContent>
        <DialogReportOutline v-if="is_report_outline" :content="report_outline" :is_loading="is_content_loading">
          <DialogOutlineActions
            v-if="answer_status == 2"
            @update="toUpdateOutLine"
            @confirm="toConfirmOutLine"
          ></DialogOutlineActions>
        </DialogReportOutline>
        <!--  -->
        <AttachFileList v-if="has_attach" :attach_file_list="attach_file_list"></AttachFileList>
        <!-- 报告文件 -->
        <div class="file_list">
          <ReportFile
            v-if="has_Report"
            :file="report_file"
            :is_download_loading="is_download_loading"
            @toDownload="toDownload"
          >
          </ReportFile>
          <ReportExcel
            v-if="has_excel"
            :file="report_excel"
            :is_download_loading="is_download_loading_excel"
            @toDownload="toDownloadExcel"
          >
          </ReportExcel>
        </div>
      </div>
      <div class="answer-item-content" v-if="chat_type === 'znws'">
        <!-- 智能问数的组件渲染和报告生成的一致，先使用同一个，后续有变动再单独拆分 -->
        <DialogReportContent
          :is_loading="is_content_loading"
          :type="type"
          :answer_status="answer_status"
          :result_list="report_content"
        >
          <DialogActions
            v-if="answer_status == 2"
            class="answer-actions-btns"
            :type="type"
            :like_status="answer_evaluation"
            @copy="handleReportCopy"
            @like="handleLike"
            @hate="handleHate"
          />
        </DialogReportContent>
      </div>
      <div class="answer-item-content" v-if="chat_type === 'bgcl'">
        <DialogBgclContent :content="bgcl_content" v-if="analyzeOrMerge">
          <RuleAction
            :event_id="props.dialog.event_id"
            :disabled="props.dialog.client_custom_config_rule_disabled"
            @merge="toMerge"
          >
          </RuleAction>
        </DialogBgclContent>
        <DialogBgclMerge
          :loading="merge_loading"
          :content="merge_content"
          :merge_error_content="merge_error_content"
          :merge_table_data="merge_table_data"
          :dialog="dialog"
          v-if="!analyzeOrMerge"
        >
          <ReportExcel
            v-if="show_merge_excel"
            :file="merge_excel"
            @toDownload="downloadMergeExcel"
            :is_download_loading="is_download_loading"
          ></ReportExcel>
        </DialogBgclMerge>
      </div>
    </div>
  </div>
  <RobotIcons
    v-if="showModal"
    :showModal="showModal"
    @close="handleClose"
    @update="handleUpdate"
    :target_agent_icon="target_agent_icon"
  ></RobotIcons>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { Message } from '@arco-design/web-vue';
import DialogContent from './DialogContent.vue';
import DialogReportOutline from './DialogReportOutline.vue';
import DialogReportContent from './DialogReportContent.vue';
import DialogBgclContent from './DialogBgclContent.vue';
import DialogBgclMerge from './DialogBgclMerge.vue';
import RuleAction from './RuleAction.vue';
import DialogActions from './DialogActions.vue';
import HomeChart from '../chat_echart/HomeChart.vue';
import ReportFile from '../chat_files/ReportFile.vue';
import ReportExcel from '../chat_files/ReportExcel.vue';
import AttachFileList from '../chat_files/AttachFileList.vue';
import RobotIcons from './RobotIcons.vue';
import DialogOutlineActions from './DialogOutlineActions.vue';
import copyText from '../../3rd-libs/clipboard';
import formatAnwserString from '../conversation-dialog/format-anwser-string';
// import RefferenceFileBlocks from '../answer-refference/RefferenceFileBlocks.vue';
import Reference from './Reference.vue';
import { useThemeStore } from '../../base/store/use-theme';
import { THEME_LIGHT, THEME_DARK, THEME_GREEN, THEME_PARTY } from '../../base/variables';
import { getIcon } from '../common/use-icon-map';
import { downloadReport, downloadExcel, toEvaluation } from '../conversation-dialog/api-dialog';
import { getMergeExcel, getCheckedErrorList } from '../table-dialog/api-dialog';
import { mergeTableData } from '../../modules/table-dialog/api-dialog';
import { formatMdToHtmlForView } from '../conversation-dialog/format-html-md-switch-for-report';

const route = useRoute();
const router = useRouter();

const props = defineProps({
  dialog: {
    type: Object,
    default: ''
  },
  type: {
    type: String,
    default: 'znwd'
  },
  target_agent_icon: {
    type: String,
    default: 'icon_1'
  }
});
const emit = defineEmits(['update', 'merge', 'update_outline', 'confirm_outline']);

const themeStore = useThemeStore();

const refference = ref(null);

const showModal = ref(false);

const is_download_loading = ref(false);
const is_download_loading_excel = ref(false);

const target_icon = computed(() => {
  if (themeStore.value == THEME_GREEN) {
    return getIcon(props.target_agent_icon, 'a');
  } else if (themeStore.value == THEME_PARTY) {
    return getIcon(props.target_agent_icon, 'b');
  } else if (themeStore.value == THEME_LIGHT) {
    return getIcon(props.target_agent_icon, 'c');
  } else {
    return getIcon(props.target_agent_icon, 'a');
  }
});
console.log(themeStore.value, THEME_PARTY, props.target_agent_icon, 909);

const report_content = computed(() => {
  // console.log(props.dialog)

  const result_list = props.dialog.result_list;
  // console.log(result_list)
  // if (result_list) {
  //   result_list.forEach(item => {
  //     if (typeof item === 'string') {
  //       console.log(111111111111111)
  //       item = formatAnwserString(item)
  //     }
  //   })

  // }
  return result_list;
});

const chat_type = computed(() => {
  return route.query.id || 'znwd';
});
const answer_html = computed(() => {
  const answer = props.dialog?.answer;

  let answer_string = formatAnwserString(answer);

  // let answer_string = answer ? marked.parse(answer) : '暂无回答';
  return answer_string;
});

const answer_status = computed(() => {
  return props.dialog.client_custom_chat_status;
});
/**
 * 内容是否正在加载中
 */
const is_content_loading = computed(() => {
  // console.log(props.dialog);
  return answer_status.value === 0;
});
/**
 * 是否展示报告大纲
 * */
const is_report_outline = computed(() => {
  return props.dialog.client_custom_report_outline;
});
const report_outline = computed(() => {
  if (props.dialog.client_custom_report_outline) {
    // console.log(props.dialog?.result_list[0]);
    if (props.dialog?.result_list && props.dialog?.result_list[0]) {
      return formatMdToHtmlForView(props.dialog.result_list[0]);
    } else {
      return '';
    }
  } else {
    return '';
  }
});

/**
 * 展示图标
 * */
const has_echarts = computed(() => {
  return answer_status.value == 2 && props.dialog.has_echarts;
});
/**
 * 展示文档
 * */
const has_Report = computed(() => {
  const request_id = props.dialog.client_request_id;
  if (request_id / 1 === 5) {
    return false;
  }
  return answer_status.value == 2 && props.dialog.report_files && props.dialog.report_files.file_name;
});
const has_excel = computed(() => {
  const request_id = props.dialog.client_request_id;
  if (request_id / 1 === 5) {
    return false;
  }
  return answer_status.value == 2 && props.dialog.report_excels && props.dialog.report_excels.file_name;
});
/**
 * 报告内容
 * */

const report_file = computed(() => {
  return props.dialog.report_files;
});
/**
 * 报表内容
 * */
const report_excel = computed(() => {
  return props.dialog.report_excels;
});

/**
 * 月报附件
 * */
const has_attach = computed(() => {
  return props.dialog.client_custom_attach_list && props.dialog.client_custom_attach_list.length;
});
/**
 * 月报附件列表
 * */
const attach_file_list = computed(() => {
  return props.dialog.client_custom_attach_list;
});
/**
 * 评估状态
 * */
const answer_evaluation = computed(() => {
  return props.dialog.answer_evaluation || 0;
});

/**
 * 完整引用数据
 */
const full_refference = computed(() => {
  if (!props.dialog) {
    return [];
  }

  const answer = props.dialog;
  if (!answer.client_custom_linked_refference_full_content) {
    return [];
  }
  const refference = JSON.parse(answer.client_custom_linked_refference_full_content);
  if (Object.keys(refference).length === 0) {
    return [];
  }

  return refference;
});
/**
 * 是否显示引用效果
 */
const has_refference = computed(() => {
  if (!full_refference.value) {
    return false;
  }

  return true;
});

/**
 * 是否显示思考过程
 * */
const is_think = computed(() => {
  return props.dialog.client_custom_item_think;
  // return true
});
/**
 * 思考状态
 * */
const deep_loading = computed(() => {
  return props.dialog.client_custom_chat_deep_loading;
  // return true
});
/**
 * 思考内容
 * */
const deep_answer = computed(() => {
  const answer = props.dialog.client_custom_item_deep_answer;
  let answer_string = formatAnwserString(answer);
  return answer_string;
  // const answer_string = formatAnwserString('截止2025年4月20日，决策平台全省全口径供电可靠率99.845%，四川公司停电总时户数2206317时户，同比增加55.80%，停电时户数较多的单位为甘孜623161时户、凉山292774时户、阿坝199088时户。 截止2025年4月20日，决策平台全省全口径供电可靠率99.845%，四川公司停电总时户数2206317时户，同比增加55.80%，停电时户数较多的单位为甘孜623161时户、凉山292774时户、阿坝199088时户。')
  // return answer_string
});
/**
 * 判断当前是解析还是合并
 * */
const analyzeOrMerge = computed(() => {
  if (props.dialog.is_analyze && !props.dialog.is_merge) return true;
  if (!props.dialog.is_analyze && props.dialog.is_merge) return false;
});
/**
 * 表格处理后，表格解析成功内容
 * */
const bgcl_content = computed(() => {
  return props.dialog.is_analyze && props.dialog.analyzeContent;
});
/**
 * 表格合并状态
 * */

const merge_loading = computed(() => {
  return props.dialog.status == 1 ? true : false;
});
/**
 * 表格处理后，表格合并内容
 * */
const merge_content = computed(() => {
  return (props.dialog.is_merge && props.dialog.mergeContent) || '';
});
const merge_error_content = computed(() => {
  return (props.dialog.is_merge && props.dialog.error_content) || '';
});
/**
 * 表格处理后，表格合并中的内容
 * */
const merge_table_data = computed(() => {
  return props.dialog.client_custom_bgcl_table_data;
});
/**
 * 表格处理，点击历史记录查看详情时，表格数据需要重新调用接口查询
 *
 */

/**
 * 是否展示合并文件
 * */
const show_merge_excel = computed(() => {
  return props.dialog.client_show_merge_file || false;
});
/**
 * 合并完成后，文件
 * */
const merge_excel = computed(() => {
  const file = {};
  file.file_name = props.dialog.file_name;
  file.file_size = props.dialog.file_size;
  return file;
});
const handleAnswerCopy = () => {
  const answer = props.dialog?.answer_origin;
  copyText(answer);
  Message.success('复制成功');
};
const handleReportCopy = () => {
  const result_list = props.dialog.result_list;
  const copy_text = result_list.filter((item) => typeof item == 'string').join('');
  copyText(copy_text);
  Message.success('复制成功');
};
const handleLike = async (status) => {
  await toEvaluationFun(props.dialog.client_custom_chat_message_id, status);
  Message.success('感谢您的认可！\n您的反馈将帮助我们优化回答质量。');
};
const handleHate = async (status) => {
  await toEvaluationFun(props.dialog.client_custom_chat_message_id, status);
  Message.success('感谢反馈！我们会认真分析并改进这个问题。');
};
const handleEditIcon = () => {
  showModal.value = true;
};

const handleClose = () => {
  showModal.value = false;
};
const handleUpdate = (icon) => {
  emit('update', icon);
  showModal.value = false;
};

const handleReportEdit = () => {
  // console.log(props.dialog, 888);
  if (props.dialog?.report_files?.record_id) {
    router.push({
      path: `/report/${props.dialog.report_files.record_id}`
    });
  } else {
    if (props.dialog?.record_id) {
      router.push({
        path: `/report/${props.dialog.record_id}`
      });
    }
  }
};
const handleSelect = (v) => {
  if (v / 1 === 1) {
    handleEditIcon();
  }
};

const toMerge = (data) => {
  emit('merge', data);
};

const showRefferenceDetails = (refIndex) => {
  if (refference.value && refIndex) {
    const item = full_refference.value?.find((item) => item.id == refIndex);
    if (item) {
      refference.value.toDetail(item);
    }
  }
};
const toEvaluationFun = async (id, status) => {
  try {
    const res = await toEvaluation(id, status);
  } catch (e) {
    console.log(e);
  } finally {
  }
};

const downloadMergeExcel = async () => {
  const data = {
    filename: props.dialog.file_name,
    event_id: props.dialog.event_id
  };
  is_download_loading.value = true;
  try {
    const res = await getMergeExcel(data);
    // if(res.code/1)
    const url = URL.createObjectURL(res.data);
    const link = document.createElement('a');
    link.href = url;
    link.download = data.filename;
    link.click();
  } catch (e) {
    console.log(e);
  } finally {
    is_download_loading.value = false;
  }
};

const toDownload = () => {
  const record_id = props.dialog.report_files.record_id;

  if (record_id) {
    is_download_loading.value = true;
    downloadReport({ record_id })
      .then((res) => {
        const url = URL.createObjectURL(res.data);
        const link = document.createElement('a');
        link.href = url;
        link.download = props.dialog.report_files.file_name;
        link.click();
      })
      .catch((e) => {
        console.log(e);
      })
      .finally(() => {
        is_download_loading.value = false;
      });
  }
};
const toDownloadExcel = () => {
  const record_id = props.dialog.report_excels.record_id;
  if (record_id) {
    is_download_loading_excel.value = true;
    downloadExcel({ record_id })
      .then((res) => {
        const url = URL.createObjectURL(res.data);
        console.log(url);
        const link = document.createElement('a');
        link.href = url;
        link.download = props.dialog.report_excels.file_name;
        link.click();
      })
      .catch((e) => {
        console.log(e);
      })
      .finally(() => {
        is_download_loading_excel.value = false;
      });
  }
};
const toUpdateOutLine = () => {
  let md_content = '';
  console.log(props.dialog);
  console.log(props.dialog.result_list);

  if (props.dialog?.result_list && props.dialog?.result_list[0]) {
    md_content = props.dialog?.result_list[0];
  }
  const data = {
    md_content,
    start_date: props.dialog.client_custom_report_outline_start_date || '',
    end_date: props.dialog.client_custom_report_outline_end_date || '',
    area: props.dialog.client_custom_report_outline_area || '',
    theme: props.dialog.client_custom_report_outline_theme || ''
  };
  emit('update_outline', data);
};

const toConfirmOutLine = () => {
  emit('confirm_outline');
};

onMounted(() => {
  const refference_parent = document.getElementById('refference_parent');
  // console.log(refference_parent, 999)
  if (refference_parent) {
    refference_parent.addEventListener('click', (e) => {
      // console.log(e.target.classList, 999)
      if (e.target.classList.contains('client-formated-markdown-doc-refference-flag')) {
        const refIndex = e.target.getAttribute('data-ref-index');
        // console.log(refIndex, 1111)
        showRefferenceDetails(refIndex);
      }
    });
  }
});
</script>
<style scoped lang="css">
.dialog_answer {
  width: calc(100%);
  height: auto;
}

.file_list {
  display: flex;
  align-items: center;
  /* justify-content: center; */
  gap: 15px;
}

.answer-item {
  display: flex;
  /* justify-content: flex-end; */
  align-items: flex-start;
}

.answer-item-content {
  max-width: calc(100% - 62px - 62px + 55px);
}

.answer-item-icon {
  position: relative;
}

.answer-item-icon .edit-icon {
  position: absolute;
  right: 0;
  bottom: 10px;
  visibility: hidden;
  cursor: pointer;
}

.answer-item-icon:hover .edit-icon {
  visibility: visible;
}

.answer-item-icon img {
  margin-right: 22px;
  /* border-radius: 50%; */
  width: 40px;
  /* height: 30px; */
  flex-shrink: 0;
  cursor: pointer;
}
</style>