From 44025036ca9baea036a629c78273e9df48ba8e2e Mon Sep 17 00:00:00 2001
From: yangyin <1850366751@qq.com>
Date: 星期五, 05 七月 2024 14:04:39 +0800
Subject: [PATCH] fix: 修改应用场景
---
src/views/project/ch/home/Scenario.vue | 155 +++++++++++++--------------------------------------
1 files changed, 41 insertions(+), 114 deletions(-)
diff --git a/src/views/project/ch/home/Scenario.vue b/src/views/project/ch/home/Scenario.vue
index d1ace78..509cf4e 100644
--- a/src/views/project/ch/home/Scenario.vue
+++ b/src/views/project/ch/home/Scenario.vue
@@ -1,49 +1,33 @@
<template>
<!-- 搴旂敤鍦烘櫙 -->
- <div class="w100 h100 box-border text-[14px] bg-[#f7f8fa] overflow-hidden pr-[32px] pb-[50px] pl-[32px] pt-[42px]">
+ <div class="w100 h100 box-border text-[14px] bg-[#f7f8fa] overflow-auto pr-[32px] pb-[50px] pl-[32px] pt-[42px]">
<div class="set-body">
- <div class="productivity recently">
+ <!-- <div class="productivity recently">
<p class="mb-[24px] flex items-center">
<el-icon color="#409eff" :size="20" class="mr-2"><Clock /></el-icon>
<span>鏈�杩戜娇鐢�</span>
</p>
<div class="flex flex-wrap items-center">
- <div class="list_app" v-for="item in state.recentlyList" :key="item.ID" @click="changeApp(item)">
+ <div class="list_app" v-for="item in state.recentlyList" :key="item.ID" >
<img :src="item.Icon" alt="" class="w-[20px] h-[20px] mr-[14px]" />
<span class="text-[14px] text-[#333f4e]">{{ item.Name }}</span>
</div>
</div>
- </div>
- <div class="productivity">
+ </div> -->
+ <div
+ class="productivity"
+ v-for="product in state.productivityList"
+ :key="product.section_id"
+ v-show="product.children && product.children.length > 0"
+ @click="changeApp(product)"
+ >
<div class="mb-[24px]">
- <span class="productivity-span"><i></i>閫氱敤鐨勫満鏅�</span>
+ <span class="productivity-span"><i></i>{{ product.section_name }}</span>
</div>
<div class="flex flex-wrap items-center">
- <div class="list_app" v-for="item in state.productivityList" :key="item.ID">
+ <div class="list_app" v-for="item in product.children" :key="item.section_id">
<img :src="item.Icon" alt="" class="w-[20px] h-[20px] mr-[14px]" />
- <span class="text-[14px] text-[#333f4e]">{{ item.Name }}</span>
- </div>
- </div>
- </div>
- <div class="productivity">
- <div class="mb-[24px]">
- <span class="productivity-span"><i></i>姘村姟搴旂敤鍦烘櫙</span>
- </div>
- <div class="flex flex-wrap items-center">
- <div class="list_app" v-for="item in state.waterApplicationList" :key="item.ID">
- <img :src="item.Icon" alt="" class="w-[20px] h-[20px] mr-[14px]" />
- <span class="text-[14px] text-[#333f4e]">{{ item.Name }}</span>
- </div>
- </div>
- </div>
- <div class="productivity">
- <div class="mb-[24px]">
- <span class="productivity-span"><i></i>杈呭姪瀛︿範</span>
- </div>
- <div class="flex flex-wrap items-center">
- <div class="list_app" v-for="item in state.studyList" :key="item.ID">
- <img :src="item.Icon" alt="" class="w-[20px] h-[20px] mr-[14px]" />
- <span class="text-[14px] text-[#333f4e]">{{ item.Name }}</span>
+ <span class="text-[14px] text-[#333f4e]">{{ item.section_name }}</span>
</div>
</div>
</div>
@@ -52,7 +36,10 @@
</template>
<script setup lang="ts">
-import { reactive } from 'vue';
+import { onMounted, reactive } from 'vue';
+import { useRoute } from 'vue-router';
+import { getSectionByAllList } from '/@/api/ai/chat';
+
import router from '/@/router';
let state = reactive({
recentlyList: [
@@ -67,92 +54,32 @@
Icon: '/static/images/scene/scene_2.png',
},
], //鏈�杩戜娇鐢�
- productivityList: [
- {
- ID: 1,
- Name: '鐭ヨ瘑搴�',
- Icon: '/static/images/scene/scene_1.png',
- },
- {
- ID: 2,
- Name: '鏂囨湰浼樺寲',
- Icon: '/static/images/scene/scene_2.png',
- },
- {
- ID: 3,
- Name: '鐭ヨ瘑搴�',
- Icon: '/static/images/scene/scene_3.png',
- },
- {
- ID: 4,
- Name: '甯歌鐨勫簲鐢�',
- Icon: '/static/images/scene/scene_2.png',
- },
- {
- ID: 5,
- Name: '鏂囩敓鏂�',
- Icon: '/static/images/scene/scene_3.png',
- },
- {
- ID: 6,
- Name: '鍚堝悓妯℃澘',
- Icon: '/static/images/scene/scene_2.png',
- },
- {
- ID: 7,
- Name: '鐩存挱甯﹁揣',
- Icon: '/static/images/scene/scene_3.png',
- },
- {
- ID: 8,
- Name: '鏂板獟浣撴枃妗�',
- Icon: '/static/images/scene/scene_2.png',
- },
- ], //閫氱敤鐨勫満鏅�
- waterApplicationList: [
- {
- ID: 1,
- Name: '姘村巶鐢熶骇',
- Icon: '/static/images/scene/scene_1.png',
- },
- {
- ID: 2,
- Name: '绠＄綉鐩戞祴',
- Icon: '/static/images/scene/scene_2.png',
- },
- {
- ID: 3,
- Name: '绠＄綉杩愯',
- Icon: '/static/images/scene/scene_3.png',
- },
- {
- ID: 4,
- Name: '浜ч攢宸�',
- Icon: '/static/images/scene/scene_2.png',
- },
- ],
- studyList: [
- {
- ID: 1,
- Name: '璁烘枃鍔╂墜',
- Icon: '/static/images/scene/scene_1.png',
- },
- {
- ID: 2,
- Name: '鍏朵粬',
- Icon: '/static/images/scene/scene_2.png',
- },
- ],
+ productivityList: [], //閫氱敤鐨勫満鏅�
});
//鍒囨崲鍒板簲鐢ㄥ満鏅鎯呯殑浜嬩欢
const changeApp = (item: any) => {
- console.log('馃殌 ~ item:', item);
- if (item.ID === 2) {
- router.push({
- name: 'ScenarioDetails',
- });
- }
+ router.push({
+ name: 'ScenarioDetails',
+ });
};
+const getSectionByList = async () => {
+ const res = await getSectionByAllList();
+ const iconList = ['/static/images/scene/scene_1.png', '/static/images/scene/scene_2.png', '/static/images/scene/scene_3.png'];
+ res.sections.forEach((item: any) => {
+ if (item.children && item.children.length > 0) {
+ item.children = item.children.map((child: any) => {
+ child.Icon = iconList[Math.floor(Math.random() * 3)];
+ return child;
+ });
+ }
+ });
+ state.productivityList = res.sections;
+};
+onMounted(() => {
+ const route = useRoute();
+ const id = route.params.id;
+ getSectionByList();
+});
</script>
<style scoped lang="scss">
.set-body {
@@ -180,7 +107,7 @@
}
}
.list_app {
- width: 140px;
+ width: 180px;
display: flex;
align-items: center;
border-radius: 8px;
--
Gitblit v1.9.3