| | |
| | | <div class="flex item-center"> |
| | | <span>应用场景</span> |
| | | </div> |
| | | <div class="cursor-pointer"> |
| | | <!-- <div class="cursor-pointer"> |
| | | <el-button link class="changeBatch" @click="lookMore" |
| | | >查看更多 |
| | | <el-icon> |
| | | <ArrowRight /> |
| | | </el-icon> |
| | | </el-button> |
| | | </div> |
| | | </div> --> |
| | | </div> |
| | | |
| | | <div class="main" v-show="state.applicationScenarios && state.applicationScenarios.length < 3"> |
| | | <div |
| | | class="main_item flex cursor-pointer" |
| | | v-for="item in state.applicationScenarios" |
| | | :key="item.section_id" |
| | | :class="{ main_item_active: item.section_id === activeSectionAId }" |
| | | :key="item.group_id" |
| | | :class="{ main_item_active: item.group_id === activeSectionAId }" |
| | | @click="changeScenarios(item)" |
| | | > |
| | | <div :class="['myiconfont icon-' + item.Icon]"></div> |
| | | |
| | | <div class="right"> |
| | | <h4>{{ item.section_name }}</h4> |
| | | <p>{{ item.section_title }}</p> |
| | | <h4>{{ item.group_name }}</h4> |
| | | <p>{{ item.group_title }}</p> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |
| | | <div class="block main" v-show="state.applicationScenarios && state.applicationScenarios.length > 3"> |
| | | <el-carousel height="80"> |
| | | <el-carousel height="80" :interval="5000" indicator-position="none"> |
| | | <el-carousel-item v-for="group in groupedArray" :key="group" class="set-carousel-item"> |
| | | <div |
| | | class="main_item flex cursor-pointer" |
| | | v-for="item in group" |
| | | :key="item.section_id" |
| | | :class="{ main_item_active: item.section_id === activeSectionAId }" |
| | | :key="item.group_id" |
| | | :class="{ main_item_active: item.group_id === activeSectionAId }" |
| | | @click="changeScenarios(item)" |
| | | > |
| | | <div :class="['myiconfont icon-' + item.Icon]"></div> |
| | | <div :class="['ywifont ywicon-' + item.Icon]"></div> |
| | | <div class="right"> |
| | | <h4>{{ item.section_name }}</h4> |
| | | <p>{{ item.section_title }}</p> |
| | | <h4>{{ item.group_name }}</h4> |
| | | <p>{{ item.group_title }}</p> |
| | | </div> |
| | | </div> |
| | | </el-carousel-item> |
| | |
| | | </template> |
| | | |
| | | <script setup lang="ts"> |
| | | import { computed, onMounted, reactive } from 'vue'; |
| | | import { computed, onMounted, reactive, ref } from 'vue'; |
| | | import { getSectionList } from '/@/api/ai/chat'; |
| | | import router from '/@/router'; |
| | | import { activeRoomId, activeSectionAId, sectionAList, setRoomConfig } from '/@/stores/chatRoom'; |
| | | |
| | | import { activeSectionAId, sectionAList } from '/@/stores/chatRoom'; |
| | | import { OptClassificationMap, classificationEnum } from '/@/views/types/metrics'; |
| | | let state = reactive({ |
| | | applicationScenarios: [], |
| | | scenariosIds: [], |
| | |
| | | (event: 'tagListClick', data): void; |
| | | }>(); |
| | | const changeScenarios = async (item) => { |
| | | activeSectionAId.value = item.section_id; |
| | | setRoomConfig(activeRoomId.value, 'isAnswerByLLM', false); |
| | | activeSectionAId.value = item.group_id; |
| | | emits('tagListClick', item); |
| | | // setRoomConfig(activeRoomId.value, 'isAnswerByLLM', false); |
| | | }; |
| | | const iconList = ref([ |
| | | 'duoweidu', |
| | | 'zhibiao', |
| | | 'shujuzhongxin', |
| | | 'shujuguanli', |
| | | 'wendang', |
| | | 'grid', |
| | | 'liebiao', |
| | | 'wentifankui', |
| | | 'cedian', |
| | | 'shuzhuangtu', |
| | | 'bengzhan', |
| | | 'gerenxinxi_o', |
| | | 'bengzhan1', |
| | | 'yingyongzhongxin', |
| | | ]); |
| | | const getIconByIndex = (index) => { |
| | | const iconCount = iconList.value.length; |
| | | return iconList.value[index % iconCount]; |
| | | }; |
| | | const getMainSectionList = async () => { |
| | | const res = await getSectionList(); |
| | | let result = []; |
| | | const iconList = [ |
| | | 'biaodan', |
| | | 'putong', |
| | | 'zhongduancanshuchaxun', |
| | | 'shidu', |
| | | 'fuwenbenkuang', |
| | | 'fuwenben', |
| | | 'jiliandongxuanzeqi', |
| | | 'jinridaiban', |
| | | 'gongju', |
| | | ]; |
| | | res.sections.forEach((sectionItem, index) => { |
| | | sectionItem.Icon = iconList[index]; |
| | | res.groups.forEach((sectionItem, index) => { |
| | | if ( |
| | | sectionItem.group_type != OptClassificationMap[classificationEnum.Office] && |
| | | sectionItem.group_type != OptClassificationMap[classificationEnum.Knowledge] |
| | | ) { |
| | | sectionItem.Icon = getIconByIndex(index); |
| | | result.push(sectionItem); |
| | | } |
| | | }); |
| | | state.applicationScenarios = res.sections; |
| | | sectionAList.value = res.sections; |
| | | res.sections?.[0] && changeScenarios(res.sections[0]); |
| | | state.applicationScenarios = result; |
| | | sectionAList.value = res.groups; |
| | | res.groups?.[0] && changeScenarios(res.groups[0]); |
| | | }; |
| | | const groupedArray = computed(() => { |
| | | const groups = []; |