From 542b404c51f67b8fb9e56ed0ba0562e31af7d257 Mon Sep 17 00:00:00 2001 From: gerson <1405270578@qq.com> Date: 星期六, 06 七月 2024 18:52:47 +0800 Subject: [PATCH] Merge branch 'master' of http://47.103.154.90:83/r/WI/Web.V1.0 --- src/views/project/ch/home/component/waterRight/center.vue | 41 ++++++++++++-------- src/views/project/ch/home/component/waterRight/bottom.vue | 40 ++++++++++++++------ 2 files changed, 52 insertions(+), 29 deletions(-) diff --git a/src/views/project/ch/home/component/waterRight/bottom.vue b/src/views/project/ch/home/component/waterRight/bottom.vue index 8ae8cfd..f524457 100644 --- a/src/views/project/ch/home/component/waterRight/bottom.vue +++ b/src/views/project/ch/home/component/waterRight/bottom.vue @@ -17,7 +17,7 @@ <div class="main"> <div class="main_item flex cursor-pointer" - v-for="(item, index) in state.applicationScenarios" + v-for="item in state.applicationScenarios" :key="item.section_id" :class="{ main_item_active: item.section_id === activeSectionAId }" @click="changeScenarios(item)" @@ -30,11 +30,14 @@ </div> </div> </div> + <div class="set-page"> + <el-pagination size="small" background layout="prev, pager, next" class="mt-4" /> + </div> </div> </template> <script setup lang="ts"> -import { onMounted, reactive } from 'vue'; +import { onMounted, reactive, computed } from 'vue'; import { getSectionList } from '/@/api/ai/chat'; import router from '/@/router'; import { activeSectionAId } from '/@/stores/chatRoom'; @@ -45,25 +48,34 @@ }); const changeScenarios = async (item) => { activeSectionAId.value = item.section_id; - return; - router.push({ - name: 'Scenario', - query: { ID: item.section_id }, - }); }; const getMainSectionList = async () => { const res = await getSectionList(); - let result = res.sections; + let result = []; const iconList = ['biaodan', 'putong', 'zhongduancanshuchaxun', 'shidu']; res.sections.forEach((sectionItem, index) => { sectionItem.Icon = iconList[index]; + if (index < 4) { + result.push(sectionItem); + } }); - state.applicationScenarios = res.sections; + state.applicationScenarios = result; res.sections?.[0] && changeScenarios(res.sections[0]); // state.scenariosIds = result.map((item) => item.section_id); }; - +const groupedArray = computed(() => { + const groups = []; + let i = 0; + while (state.applicationScenarios.length > i) { + groups.push(state.applicationScenarios.slice(i, (i += 4))); + } + return groups; +}); +const nextPage = () => { + const index = Math.floor(Math.random() * groupedArray.value.length); + state.applicationScenarios = groupedArray.value[index]; +}; // 鏌ョ湅鏇村 const lookMore = () => { router.push({ @@ -191,7 +203,11 @@ } } } + .set-page { + display: flex; + justify-content: center; + align-items: center; + margin: 10px 0px; + } } </style> -import item from 'element-plus/es/components/space/src/item';import item from 'element-plus/es/components/space/src/item';import item -from 'element-plus/es/components/space/src/item'; diff --git a/src/views/project/ch/home/component/waterRight/center.vue b/src/views/project/ch/home/component/waterRight/center.vue index 0fb7c22..c767825 100644 --- a/src/views/project/ch/home/component/waterRight/center.vue +++ b/src/views/project/ch/home/component/waterRight/center.vue @@ -50,7 +50,7 @@ <div class="box-border w-[354px] flex-1 min-h-0 bg-[#e0e7fb]" v-show="state.activeName == 1"> <div class="flex flex-col w100 h100 pt-0 pr-[15px] pb-0 pl-[20px] overflow-auto"> <div class="flex items-center w100 h-[30px] border border-solid border-[#b2b2b2] transition-[border-color 1s] rounded-2xl"> - <el-input v-model="queryParams.searchInput" placeholder="鎼滅储鏇村" class="set-input" :prefix-icon="Search" clearable> + <el-input v-model="queryParams.sample_title" placeholder="鎼滅储鏇村" class="set-input" :prefix-icon="Search" clearable> </el-input> </div> <div class="mt20 w100 relative"> @@ -97,7 +97,7 @@ <div class="box-border w-[354px] flex-1 min-h-0 bg-[#e0e7fb]" v-show="state.activeName == 2"> <div class="flex flex-col w100 h100 pt-0 pr-[15px] pb-0 pl-[20px] overflow-auto"> <div class="flex items-center w100 h-[30px] border border-solid border-[#b2b2b2] transition-[border-color 1s] rounded-2xl"> - <el-input v-model="queryParams.instructInput" placeholder="鎼滅储鏇村" class="set-input" :prefix-icon="Search" clearable> + <el-input v-model="instructParams.template_title" placeholder="鎼滅储鏇村" class="set-input" :prefix-icon="Search" clearable> </el-input> </div> <div class="mt20 w100 relative"> @@ -120,11 +120,7 @@ <i class="iconfont icon-zhongduancanshu" title="鏀剁缉" @click="handleExpandClick(2)" v-show="state.isShowExpand"></i> </div> <div class="mt20 w100"> - <div - class="w100 pb-[20px] flex overflow-auto flex-col" - v-for="item in state.instructContentList" - :key="item.template_id" - > + <div class="w100 pb-[20px] flex overflow-auto flex-col" v-for="item in showInstructList" :key="item.template_id"> <div class="bg-[#f5f7fd] p-[12px] transition-[background-color .2s] flex flex-col rounded-2xl"> <div class="flex justify-between"> <span class="set-title">{{ item.template_title }}</span> @@ -230,14 +226,13 @@ Title: '鍙戠幇鎺㈢储', }, ], - - instructContentList: [], - activeLabelName: 0, activeInstructName: 0, isShowExpand: false, }); -const exampleList = ref([]); +const exampleList = ref([]); //妯$増鍒楄〃 +const instructContentList = ref([]); //鎸囦护鍒楄〃 + onMounted(() => { getSelectListSample(); getUserTemplate(); @@ -277,13 +272,12 @@ //鑾峰彇鐢ㄦ埛妯℃澘 const getUserTemplate = async () => { const res = await getUserTemplateList(); - state.instructContentList = res.templates; + instructContentList.value = res.templates; }; //鎹竴鎵� const batchChange = () => { const index = Math.floor(Math.random() * groupedArray.value.length); state.exampleContent = groupedArray.value[index]; - // console.log(state.exampleContent, 341); }; //楂樼骇绀轰緥 const advanceExampleClick = () => { @@ -316,21 +310,34 @@ .toString(16) .padEnd(6, '0')}`; }; -//#region ====================== 鎼滅储鑱婂ぉ瀹� ====================== +//#region ====================== 鎼滅储妯℃澘/鎸囦护 ====================== const queryParams = ref({ - searchInput: '', - instructInput: '', + sample_title: '', }); const { query, queryData } = useSearch(exampleList, queryParams); const debounceQuery = debounce(query); watch( - () => queryParams.value.searchInput, + () => queryParams.value.sample_title, (val) => { debounceQuery(); } ); +//鎸囦护 +const instructParams = ref({ + template_title: '', +}); +const { query: queryInstruct, queryData: showInstructList } = useSearch(instructContentList, instructParams); + +const instructQuery = debounce(queryInstruct); + +watch( + () => instructParams.value.template_title, + (val) => { + instructQuery(); + } +); //#endregion </script> <style scoped lang="scss"> -- Gitblit v1.9.3