From 013ba12301b81015e8023120a7ead3c646d4d28c Mon Sep 17 00:00:00 2001
From: yangyin <1850366751@qq.com>
Date: 星期五, 05 七月 2024 17:41:18 +0800
Subject: [PATCH] fix: 修改应用场景详情

---
 src/views/project/ch/home/component/waterRight/center.vue |  235 ++++++++++++++++++++++++----------------------------------
 1 files changed, 96 insertions(+), 139 deletions(-)

diff --git a/src/views/project/ch/home/component/waterRight/center.vue b/src/views/project/ch/home/component/waterRight/center.vue
index ed3b2ba..34a25d4 100644
--- a/src/views/project/ch/home/component/waterRight/center.vue
+++ b/src/views/project/ch/home/component/waterRight/center.vue
@@ -7,7 +7,7 @@
 				<span class="change cursor-pointer" @click="advanceExampleClick">楂樼骇绀轰緥 ></span>
 			</div>
 			<div class="cursor-pointer">
-				<span class="mr-1 changeBatch">鎹竴鎵�</span>
+				<span class="mr-1 changeBatch" @click="batchChange">鎹竴鎵�</span>
 				<i class="iconfont icon-shuaxin"></i>
 			</div>
 		</div>
@@ -16,36 +16,38 @@
 			<div
 				class="main_item flex items-center cursor-pointer"
 				v-for="(item, index) in state.exampleContent"
-				:key="item.ID"
-				:class="{ main_item_active: item.ID === state.exampleIndex }"
+				:key="index"
+				:class="{ main_item_active: item.sample_id === activeSampleId }"
 				@click="changeExample(item)"
 			>
 				<div class="left flex items-center justify-center" :class="['color' + index]">
 					<img :src="item.Icon" alt="" />
 				</div>
 				<div class="right">
-					<h4>{{ item.Title }}</h4>
-					<p>{{ item.Content }}</p>
+					<h4>{{ item.sample_title }}</h4>
+					<p>{{ item.sample_question }}</p>
 				</div>
 			</div>
 		</div>
 		<el-drawer v-model="state.isShowAdvanceExample" direction="rtl" size="354">
-			<div class="box-border w100 bg-[#e0e7fb] relative flex items-center justify-center" style="padding: 30px 20px 26px">
-				<div
-					class="box-border flex w-[203px] h-[32px] rounded-md items-center justify-between cursor-pointer relative border border-solid border-[#2c2d33]"
-				>
+			<template #header style="padding: 30px 20px 26px">
+				<div class="box-border w100 bg-[#e0e7fb] relative flex items-center justify-center">
 					<div
-						class="tabbar-item"
-						:class="state.activeName === item.ID ? 'set-tabbar-active' : ''"
-						@click="handleTabClick(item)"
-						v-for="item in state.tabNameList"
-						:key="item.ID"
+						class="box-border flex w-[203px] h-[32px] rounded-md items-center justify-between cursor-pointer relative border border-solid border-[#2c2d33]"
 					>
-						{{ item.Name }}
+						<div
+							class="tabbar-item"
+							:class="state.activeName === item.ID ? 'set-tabbar-active' : ''"
+							@click="handleTabClick(item)"
+							v-for="item in state.tabNameList"
+							:key="item.ID"
+						>
+							{{ item.Name }}
+						</div>
 					</div>
 				</div>
-			</div>
-			<div class="box-border w-[354px] flex-1 min-h-0 bg-[#e0e7fb]" style="height: calc(100% - 88px)" v-show="state.activeName == 1">
+			</template>
+			<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="state.searchInput" placeholder="鎼滅储鏇村" class="set-input" :prefix-icon="Search"> </el-input>
@@ -70,16 +72,16 @@
 							<i class="iconfont icon-zhongduancanshu" title="鏀剁缉" @click="handleExpandClick(2)" v-show="state.isShowExpand"></i>
 						</div>
 						<div class="mt20 w100">
-							<div class="w100 pb-[20px]" v-for="item in state.exampleContentList" :key="item.ID">
+							<div class="w100 pb-[20px]" v-for="item in state.exampleContentList" :key="item.sample_id">
 								<div class="cursor-pointer flex box-border p-[12px] w100 rounded bg-[#f5f7fd] transition-[background-color .2s]">
 									<i
 										class="iconfont icon-chazhaobiaodanliebiao pl-[2px] w-[16px] h-[16px] font12 text-[#fff] transform-[scale(.85)] rounded-[50%]"
 										:style="`background-color:${item.BgColor}`"
 									></i>
 									<div class="ml-6 flex-1 min-w-0">
-										<div class="text-sm text-[#000] m-0 p-0 font-bold">{{ item.Title }}</div>
+										<div class="text-sm text-[#000] m-0 p-0 font-bold">{{ item.sample_title }}</div>
 										<div class="mt-[6px] text-[13px] text-[#666] h-[20px] whitespace-nowrap text-ellipsis overflow-hidden">
-											{{ item.Content }}
+											{{ item.sample_question }}
 										</div>
 									</div>
 								</div>
@@ -88,7 +90,7 @@
 					</div>
 				</div>
 			</div>
-			<div class="box-border w-[354px] flex-1 min-h-0 bg-[#e0e7fb]" style="height: calc(100% - 88px)" v-show="state.activeName == 2">
+			<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="state.searchInput" placeholder="鎼滅储鏇村" class="set-input" :prefix-icon="Search"> </el-input>
@@ -113,18 +115,18 @@
 							<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.ID">
+							<div
+								class="w100 pb-[20px] flex overflow-auto flex-col"
+								v-for="item in state.instructContentList"
+								: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.Title }}</span>
+										<span class="set-title">{{ item.template_title }}</span>
 									</div>
-									<div class="example-body ellipsis">{{ item.Content }}</div>
+									<div class="example-body ellipsis">{{ item.template_value }}</div>
 									<div class="example-bottom">
-										<div class="flex w-[190px] items-center flex-nowrap">
-											<div v-for="exampleItem in item.exampleBottomList" :key="item.ID">
-												<span class="example-item">{{ exampleItem }}</span>
-											</div>
-										</div>
+										<span class="example-item">{{ item.template_type }}</span>
 										<el-button type="primary" class="set-button">浣跨敤</el-button>
 									</div>
 								</div>
@@ -139,39 +141,17 @@
 
 <script setup lang="ts">
 import { Search } from '@element-plus/icons-vue';
-import { onMounted, reactive } from 'vue';
+import { computed, onMounted, reactive } from 'vue';
+import { getSelectSample, getUserTemplateList } from '/@/api/ai/chat';
+import { activeSampleId } from '/@/stores/chatRoom';
+import emitter from '/@/utils/mitt';
 let state = reactive({
-	exampleContent: [
-		{
-			ID: 1,
-			Icon: '/static/images/wave/ChatImg.png',
-			Title: '瑙ｈ鏉庡洓鐨勫弽搴�',
-			Content: '寮犱笁鎵撲簡鏉庡洓涓�宸存帉,鏉庡洓瀵瑰紶涓夎:"浣犳槸涓嶆槸娌″悆楗�",鏉庡洓璇磋繖鍙ヨ瘽鍚箟鏄�?',
-		},
-		{
-			ID: 2,
-			Icon: '/static/images/wave/ChatImg.png',
-			Title: '瑙ｉ噴鍔姏涓庡唴鍗风殑鍖哄埆',
-			Content: '鎬庝箞瑙ｉ噴鍔姏鍜屽唴鍗风殑鍖哄埆?',
-		},
-		{
-			ID: 3,
-			Icon: '/static/images/wave/ChatImg.png',
-			Title: '鍏朵粬闂',
-			Content: '璇锋悳绱綘鎯崇煡閬撶殑闂',
-		},
-		{
-			ID: 4,
-			Icon: '/static/images/wave/ChatImg.png',
-			Title: '缁欏疂瀹濆彇鏈夋枃鍖栧唴娑电殑鍚嶅瓧',
-			Content: '璇蜂互璇楃粡涓殑鍏告晠缁欑敺瀹濆疂鍙栧悕锛屽椤撅紝鍚嶅瓧瑕佹眰3涓瓧锛岀粰5涓悕瀛椾緵鎴戦�夋嫨銆�',
-		},
-	],
+	exampleContent: [],
+	exampleRandomContent: [],
 	tabNameList: [
 		{ ID: 1, Name: '鎻愰棶绀轰緥' },
 		{ ID: 2, Name: '鎸囦护妯℃澘' },
 	],
-	exampleIndex: 0,
 	isShowAdvanceExample: false,
 	activeName: 1,
 	searchInput: '',
@@ -243,96 +223,58 @@
 			Title: '鍙戠幇鎺㈢储',
 		},
 	],
-	exampleContentList: [
-		{
-			ID: 1,
-			Title: '濡備綍鎻愬崌鑷繁鐨勮亴鍦虹珵浜夊姏锛�',
-			Content:
-				'鑱屽満绔炰簤鍔涙槸琛￠噺涓�涓汉鏄惁鎴愬姛鐨勯噸瑕佹爣鍑嗐�傝亴鍦虹珵浜夊姏鐨勬彁鍗囷紝闇�瑕侀暱鏈熺殑鍔姏鍜屽潥鎸併�備笅闈㈡槸涓�浜涙彁鍗囪亴鍦虹珵浜夊姏鐨勬柟娉曪細1. 淇濇寔涓撴敞锛氫笓娉ㄤ簬鑷繁鐨勫伐浣滐紝涓嶆柇瀛︿範鏂版妧鑳斤紝鎻愬崌鎶�鑳芥按骞炽��2. 淇濇寔瀛︿範锛氫笉鏂涔犳柊鐭ヨ瘑锛屼笉鏂彁鍗囪嚜宸辩殑涓撲笟鐭ヨ瘑銆�3. 淇濇寔鐑儏锛氫繚鎸佺Н鏋佸悜涓婄殑蹇冩�侊紝涓嶆柇杩芥眰鏂颁簨鐗┿��4. 淇濇寔閫傚綋鐨勪紤鎭細閫傚綋鐨勪紤鎭彲浠ヨ韬綋鏇村姞鍋ュ悍锛屾彁楂樺伐浣滄晥鐜囥��5. 淇濇寔绉瀬鐨勬�佸害锛氱Н鏋佺殑鎬佸害鍙互婵�鍙戝憳宸ョ殑鍒涢�犲姏锛屾彁鍗囧伐浣滅殑绉瀬鎬с��',
-		},
-		{
-			ID: 2,
-			Title: '鐖辨姢鍔ㄧ墿瑙嗛鍓ф湰',
-			Content: '璇锋媴浠荤紪鍓э紝鎴戦渶瑕佹媿鎽勪竴涓叧浜庣埍鎶ゅ姩鐗╃殑瑙嗛锛岃缁欐垜鐢熸垚鎷嶆憚鍐呭鍜岃剼鏈�',
-		},
-		{
-			ID: 3,
-			Title: '娉㈢矑浜岃薄鎬�',
-			Content: '瑙ｉ噴涓�涓嬫尝绮掍簩璞℃�х悊璁�',
-		},
-		{
-			ID: 4,
-			Title: '濡備綍鎻愬崌鑷繁鐨勮亴鍦虹珵浜夊姏锛�',
-			Content:
-				'鑱屽満绔炰簤鍔涙槸琛￠噺涓�涓汉鏄惁鎴愬姛鐨勯噸瑕佹爣鍑嗐�傝亴鍦虹珵浜夊姏鐨勬彁鍗囷紝闇�瑕侀暱鏈熺殑鍔姏鍜屽潥鎸併�備笅闈㈡槸涓�浜涙彁鍗囪亴鍦虹珵浜夊姏鐨勬柟娉曪細1. 淇濇寔涓撴敞锛氫笓娉ㄤ簬鑷繁鐨勫伐浣滐紝涓嶆柇瀛︿範鏂版妧鑳斤紝鎻愬崌鎶�鑳芥按骞炽��2. 淇濇寔瀛︿範锛氫笉鏂涔犳柊鐭ヨ瘑锛屼笉鏂彁鍗囪嚜宸辩殑涓撲笟鐭ヨ瘑銆�3. 淇濇寔鐑儏锛氫繚鎸佺Н鏋佸悜涓婄殑蹇冩�侊紝涓嶆柇杩芥眰鏂颁簨鐗┿��4. 淇濇寔閫傚綋鐨勪紤鎭細閫傚綋鐨勪紤鎭彲浠ヨ韬綋鏇村姞鍋ュ悍锛屾彁楂樺伐浣滄晥鐜囥��5. 淇濇寔绉瀬鐨勬�佸害锛氱Н鏋佺殑鎬佸害鍙互婵�鍙戝憳宸ョ殑鍒涢�犲姏锛屾彁鍗囧伐浣滅殑绉瀬鎬с��',
-		},
-		{
-			ID: 5,
-			Title: '鎸戦�夊悎閫傜殑绀肩墿',
-			Content: '璇峰コ瀹㈡埛鍚冮キ锛屽噯澶囬�佷竴涓皬绀肩墿锛岄�変粈涔堢ぜ鐗╁悎閫傚憿',
-		},
-		{
-			ID: 6,
-			Title: '瑙ｆ柟绋媥虏-y虏=49',
-			Content: '姝ｆ暣鏁皒,y婊¤冻x^2-y^2=49锛屾眰x鍜寉鐨勫��',
-		},
-		{
-			ID: 7,
-			Title: '璁＄畻鐞冧綋浣撶Н',
-			Content: '璁＄畻鐞冧綋浣撶Н',
-		},
-		{
-			ID: 8,
-			Title: '鐖辨姢鍔ㄧ墿瑙嗛鍓ф湰',
-			Content: '璇锋媴浠荤紪鍓э紝鎴戦渶瑕佹媿鎽勪竴涓叧浜庣埍鎶ゅ姩鐗╃殑瑙嗛锛岃缁欐垜鐢熸垚鎷嶆憚鍐呭鍜岃剼鏈�',
-		},
-		{
-			ID: 9,
-			Title: '璇楁剰缈昏瘧锛氭棩鏈堜笌鐖�',
-			Content: '缈昏瘧涓鸿嫳鏂囷細娴笘涓囧崈锛屽惥鐖辨湁涓夛紝鏃ャ�佹湀銆佸嵖锛屾棩涓烘湞锛屾湀涓烘毊锛屽嵖涓烘湞鏈濇毊鏆��',
-		},
-	],
-	instructContentList: [
-		{
-			ID: 1,
-			Title: '璇█妫�娴嬪櫒',
-			Content:
-				'鎴戝笇鏈涗綘鍏呭綋璇█妫�娴嬪櫒銆傛垜浼氱敤浠讳綍璇█杈撳叆涓�涓彞瀛愶紝浣犱細鍥炵瓟鎴戯紝鎴戝啓鐨勫彞瀛愭槸鐢ㄥ摢绉嶈瑷�鍐欑殑銆備笉瑕佸啓浠讳綍瑙ｉ噴鎴栧叾浠栨枃瀛楋紝鍙渶鍥炲璇█鍚嶇О鍗冲彲',
-			exampleBottomList: ['鏂囧鏋勬��', '璇█缈昏瘧', '楂樻晥绛栧垝'],
-		},
-		{
-			ID: 2,
-			Title: '澶栬缁冧範',
-			Content: '鎴戜細鐢ㄨ嫳璇拰浣犺璇濓紝浣犱細鐢ㄨ嫳璇洖澶嶆垜鏉ョ粌涔犳垜鐨勮嫳璇彛璇�傛垜甯屾湜鎮ㄧ殑鍥炲',
-			exampleBottomList: ['鏂囧鏋勬��', '鑹烘湳鍒涗綔', '鍙戠幇鎺㈢储'],
-		},
-		{
-			ID: 3,
-			Title: '鎴戞兂璁╀綘鍏呭綋鑻辫',
-			Content: '鎴戜細鐢ㄤ换浣曡瑷�涓庝綘浜よ皥锛屼綘浼氭娴嬭瑷�锛岀炕璇戝畠骞剁敤鎴戠殑鏂囨湰鐨勬洿姝ｅ拰鏀硅繘鐗堟湰鐢ㄨ嫳璇洖绛斻�傛垜甯屾湜浣犵敤',
-			exampleBottomList: ['鏂囧鏋勬��', '椤鹃棶涓撳', '鑱屽満鍔╂墜'],
-		},
-		{
-			ID: 4,
-			Title: '澶氳缈昏瘧',
-			Content:
-				'鎴戣姹備綘鎵紨涓�鍚嶄笓涓氱殑璇戣�呫�佹嫾鍐欑籂姝ｈ�呮垨鏂囨湰浼樺寲鑰呯殑瑙掕壊銆傛垜灏嗙敤鍚勭璇█涓庝綘浜ゆ祦锛屼綘鍒欓渶瑕佺敤瀵瑰簲鐨勮瑷�鍦ㄦ垜鐨勬枃鏈繘琛屼慨姝ｅ拰浼樺寲鐗堟湰銆備綘鐨勫洖绛斾粎闄愪簬淇鍜屼紭鍖栵紝涓嶅寘鎷叾浠栧唴瀹癸紝涔熶笉闇�瑕佹彁渚涜В閲娿�傚湪淇濊瘉缈昏瘧璐ㄩ噺鐨勫墠鎻愪笅锛屼綘鐨勫洖绛斿簲灏藉彲鑳界畝娲併�傛垜鐨勯鍙ヨ瘽鏄細',
-			exampleBottomList: ['鏂囧鏋勬��', '璇█缈昏瘧'],
-		},
-	],
+	exampleContentList: [],
+	instructContentList: [],
 
 	activeLabelName: 0,
 	activeInstructName: 0,
 	isShowExpand: false,
 });
 onMounted(() => {
-	state.exampleContentList.forEach((item) => {
-		item.BgColor = randomHexColor();
-	});
+	getSelectListSample();
+	getUserTemplate();
 });
+const groupedArray = computed(() => {
+	const groups = [];
+	let i = 0;
+	while (state.exampleRandomContent.length > i) {
+		groups.push(state.exampleRandomContent.slice(i, (i += 4)));
+	}
+	return groups;
+});
+const getSelectListSample = async () => {
+	const res = await getSelectSample({
+		section_b_id: '',
+	});
+	// console.log(res, 63);
+	state.exampleRandomContent = res.samples;
+
+	const array = [];
+	res.samples.forEach((sample, index) => {
+		sample.Icon = '/static/images/wave/ChatImg.png';
+		sample.BgColor = randomHexColor();
+		if (index < 4) {
+			array.push(sample);
+		}
+	});
+	state.exampleContentList = res.samples;
+	state.exampleContent = array;
+};
 
 const changeExample = (item) => {
-	state.exampleIndex = item.ID;
+	emitter.emit('updateChatInput', item.sample_question);
+	activeSampleId.value = item.sample_id;
+};
+//鑾峰彇鐢ㄦ埛妯℃澘
+const getUserTemplate = async () => {
+	const res = await getUserTemplateList();
+	state.instructContentList = 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 = () => {
@@ -350,7 +292,7 @@
 const handleInstructClick = (item) => {
 	state.activeInstructName = item.ID;
 };
-//鎼滅储
+
 //灞曞紑鏀惰捣
 const handleExpandClick = (type) => {
 	if (type == 1) {
@@ -566,4 +508,19 @@
 		cursor: pointer;
 	}
 }
+:deep(.el-drawer__header) {
+	padding: 30px 20px 26px !important;
+	box-sizing: border-box;
+	width: 100%;
+	background-color: #e0e7fb;
+
+	position: relative;
+
+	height: unset !important;
+	margin-bottom: unset !important;
+	border-bottom: unset !important;
+}
+:deep(.el-drawer__body) {
+	overflow-x: hidden;
+}
 </style>

--
Gitblit v1.9.3