From d5f17f079d4af2a173015dc86a4d6d472731fac6 Mon Sep 17 00:00:00 2001
From: gerson <1405270578@qq.com>
Date: 星期日, 07 七月 2024 16:59:53 +0800
Subject: [PATCH] echart 图表问题；raw_mode
---
src/views/project/ch/home/Scenario.vue | 150 +++++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 147 insertions(+), 3 deletions(-)
diff --git a/src/views/project/ch/home/Scenario.vue b/src/views/project/ch/home/Scenario.vue
index 51026ba..e7800bf 100644
--- a/src/views/project/ch/home/Scenario.vue
+++ b/src/views/project/ch/home/Scenario.vue
@@ -1,4 +1,148 @@
-<template>123</template>
+<template>
+ <!-- 搴旂敤鍦烘櫙 -->
+ <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">
+ <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" >
+ <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"
+ v-for="product in state.productivityList"
+ :key="product.section_id"
+ v-show="product.children && product.children.length > 0"
+ >
+ <div class="mb-[24px]">
+ <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 product.children" :key="item.section_id" @click="changeApp(product.section_id, item)">
+ <img :src="item.Icon" alt="" class="w-[20px] h-[20px] mr-[14px]" />
+ <span class="text-[14px] text-[#333f4e]">{{ item.section_name }}</span>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
-<script setup lang="ts"></script>
-<style scoped lang="scss"></style>
+<script setup lang="ts">
+import { onMounted, reactive } from 'vue';
+import { getSectionByAllList } from '/@/api/ai/chat';
+
+import router from '/@/router';
+let state = reactive({
+ recentlyList: [
+ {
+ ID: 1,
+ Name: '椤圭洰绠＄悊',
+ Icon: '/static/images/scene/scene_1.png',
+ },
+ {
+ ID: 2,
+ Name: '宸ヤ綔鍐呭',
+ Icon: '/static/images/scene/scene_2.png',
+ },
+ ], //鏈�杩戜娇鐢�
+ productivityList: [], //閫氱敤鐨勫満鏅�
+});
+//鍒囨崲鍒板簲鐢ㄥ満鏅鎯呯殑浜嬩欢
+const changeApp = (section_id, item: any) => {
+ router.push({
+ name: 'ScenarioDetails',
+ query: {
+ ID: section_id,
+ Name: item.section_name,
+ Title: item.section_title,
+ },
+ });
+};
+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(() => {
+ getSectionByList();
+});
+</script>
+<style scoped lang="scss">
+.set-body {
+ max-width: 1000px;
+ min-height: calc(100% - 42px);
+ margin: 0 auto;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ border-radius: 8px;
+ margin-top: 32px;
+ -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.16);
+ box-shadow: 0 0 1px rgba(0, 0, 0, 0.16);
+ .productivity {
+ padding: 24px 30px 10px;
+ background-color: #fff;
+ margin-bottom: 20px;
+ border-radius: 12px;
+ p {
+ span {
+ font-size: 14px;
+ color: #081735;
+ line-height: 20px;
+ display: flex;
+ align-items: center;
+ }
+ }
+ .list_app {
+ width: 180px;
+ display: flex;
+ align-items: center;
+ border-radius: 8px;
+ border: 1px solid #ccc;
+ padding: 15px;
+ margin-right: 14px;
+ margin-bottom: 14px;
+ cursor: pointer;
+ position: relative;
+ background-color: #fff;
+ &:hover {
+ border: 1px solid #1c86ff;
+ }
+ }
+ .productivity-span {
+ font-size: 14px;
+ color: #081735;
+ line-height: 20px;
+ display: flex;
+ align-items: center;
+ i {
+ display: block;
+ width: 4px;
+ height: 14px;
+ background: #1c86ff;
+ border-radius: 0 100px 100px 0;
+ margin-right: 10px;
+ }
+ }
+ }
+ .recently {
+ border: 1px solid #e5eaf9;
+ background-color: #e9eff8;
+ }
+}
+</style>
--
Gitblit v1.9.3