feat: 新增指令使用模板可以弹窗

yangyin

2024-07-07 68e9ca0b9076a0fe14474cc71b6dc2c420fc5e7f

 src/views/project/ch/home/ScenarioDetails.vue

@@ -6,10 +6,10 @@
               <div class="flex justify-between items-center">
                  <div class="flex items-center">
                     <i class="ywicon icon-gongzuozongjie text-[#1c86ff]" style="font-size: 20px !important"></i>
                     <span class="text-[14px] text-[#000] leading-5 ml-1">工作总结</span>
                     <span class="text-[14px] text-[#000] leading-5 ml-1">{{ state.select_name ? state.select_name : '' }}</span>
                  </div>
                  <el-select v-model="state.seriesModel" placeholder="请选择" size="large">
                     <el-option v-for="item in state.modelOptionList" :key="item.ID" :label="item.Name" :value="item.Name" />
                  <el-select v-model="state.seriesModel" placeholder="请选择" size="large" @change="handleModelChange">
                     <el-option v-for="item in state.modelOptionList" :key="item.id" :label="item.title" :value="item.id" />
                  </el-select>
               </div>
               <div class="pt-[30px]">
@@ -18,15 +18,21 @@
                     :model="state.modelForm"
                     :rules="modelRules"
                     label-width="auto"
                     class="custom-form"
                     label-position="top"
                     status-icon
                     size="large"
                  >
                     <el-form-item label="主题" prop="theme">
                        <el-input v-model="state.modelForm.theme" />
                        <el-input v-model="state.modelForm.theme" clearable />
                     </el-form-item>
                     <el-form-item label="类型" prop="modelType">
                        <el-select v-model="state.modelForm.modelType" placeholder="请选择类型" popper-class="custom-select-style">
                        <el-select
                           v-model="state.modelForm.modelType"
                           placeholder="请选择类型"
                           popper-class="custom-select-style"
                           :teleported="false"
                        >
                           <el-option v-for="item in state.modelTypeList" :key="item.ID" :label="item.Name" :value="item.Name"> </el-option>
                        </el-select>
                     </el-form-item>
@@ -40,11 +46,11 @@
               </div>
            </div>
         </div>
         <div class="right">
         <div class="right" v-loading="state.contentLoading">
            <div class="top">
               <div class="left">
                  <i></i>
                  <span>工作总结</span>
                  <span>{{ state.select_name ? state.select_name : '' }}总结</span>
               </div>
            </div>
            <div class="output">
@@ -57,61 +63,13 @@

<script setup lang="ts">
import type { FormRules } from 'element-plus';
import { reactive } from 'vue';
import { onMounted, reactive, ref } from 'vue';
import { useRoute } from 'vue-router';
import { QuestionWorkAi, getBigModelList } from '/@/api/ai/chat';
import { activeRoomId, activeSectionAId } from '/@/stores/chatRoom';
let state = reactive({
   seriesModel: '',
   modelOptionList: [
      {
         ID: 2,
         Name: '端吸泵EN733',
         SeriesID: '2,41,18,4,42,26',
      },
      {
         ID: 7,
         Name: '端吸泵ISO2858',
         SeriesID: '12,47,14,48',
      },
      {
         ID: 3,
         Name: '双吸泵',
         SeriesID: '30,29,3,28,40,44',
      },
      {
         ID: 4,
         Name: '管道泵',
         SeriesID: '6,51,5,46',
      },
      {
         ID: 6,
         Name: '消防泵EHF',
         SeriesID: '15',
      },
      {
         ID: 8,
         Name: '消防泵ESF',
         SeriesID: '16',
      },
      {
         ID: 5,
         Name: '自吸污水泵',
         SeriesID: '8',
      },
      {
         ID: 9,
         Name: '端吸泵电机直连',
         SeriesID: '33,38,35,37',
      },
      {
         ID: 10,
         Name: '立式多级泵',
         SeriesID: '60,61',
      },
      {
         ID: 11,
         Name: '单级管道泵',
         SeriesID: '59',
      },
   ],
   modelOptionList: [],
   modelForm: {
      theme: '',
      modelType: '',
@@ -132,17 +90,55 @@
      },
      {
         ID: 4,
         Name: '周总结',
         Name: '部门总结',
      },
   ],
   workContent: '在左侧输入内容并提交，将自动为您生成工作总结',
   llm_id: '',
   select_question: null,
   select_name: null,
   contentLoading: false,
});
const modelRules = reactive<FormRules>({
   theme: [{ required: true, message: '必填项', trigger: 'blur' }],
   supplementContenT: [{ required: true, message: '必填项', trigger: 'blur' }],
   modelType: [{ required: true, message: '必填项', trigger: 'change' }],
});
const handleSubmit = () => {};
const modelFormRef = ref(null);
//获取大模型列表
const getModelList = async () => {
   const res = await getBigModelList();
   state.modelOptionList = res.llm_list || [];
};
//切换模型
const handleModelChange = async (val: string) => {
   state.llm_id = val;
};
//立即生成
const handleSubmit = async () => {
   const valid = await modelFormRef.value.validate().catch(() => {});
   if (!valid) return;
   state.contentLoading = true;
   const res = await QuestionWorkAi({
      section_a_id: activeSectionAId.value, //当前问题对应的主场景
      sample_id: '', //当前问题对应的sample_id(可不填或为空)
      llm_id: state.llm_id ? state.llm_id : '', //当前问题对应的llm_id(不填则用缺省llm)
      history_group_id: activeRoomId.value, //当前问题对应的history group id
      raw_mode: true, //是否直接调用大模型回答问题(不填为false)
      question: state.select_question, //提出的问题
   }).finally(() => {
      state.contentLoading = false;
   });
   state.workContent = res.answer;
};
onMounted(() => {
   const route = useRoute();
   const pathInfo = route.query;
   activeSectionAId.value = pathInfo.ID;
   state.select_question = pathInfo.Title;
   state.select_name = pathInfo.Name;
   getModelList();
});
</script>
<style scoped lang="scss">
.pc-detail {
@@ -229,20 +225,16 @@
   flex-wrap: wrap;
   margin-bottom: 10px;
}
.custom-select-style {
   .el-select-dropdown__list {
      max-width: 700px !important;
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 10px;
   }
   .el-select-dropdown__item {
      height: 32px;
      background: #eaf4ff;
      border-radius: 8px;
      margin: 5px;
      font-size: 14px;
      padding: 0 20px;
   }
.custom-select-style .el-select-dropdown__item {
   height: 32px;
   background: #eaf4ff;
   border-radius: 8px;
   margin: 5px;
   font-size: 14px;
   padding: 0 20px;
}
.custom-select-style .el-select-dropdown__item.selected {
   color: #409eff !important;
   font-weight: 700;
}
</style>