fix: 修改应用场景

yangyin

2024-07-05 44025036ca9baea036a629c78273e9df48ba8e2e

 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]">
   <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">
               <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,11 @@
</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: [
      {
@@ -66,82 +54,31 @@
         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) => {
   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">
@@ -170,7 +107,7 @@
         }
      }
      .list_app {
         width: 140px;
         width: 180px;
         display: flex;
         align-items: center;
         border-radius: 8px;