完善大屏画布

src/App.vue

@@ -5,14 +5,24 @@
 -->
 <template>
   <router-view></router-view>
-  <speechControl></speechControl>
+  <speechControl v-if="showSpeechControl"></speechControl>
 </template>
 
 <script setup>
-import { onMounted } from "vue";
+import { onMounted, ref, watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
 import speechControl from "./view/components/speechControl.vue";
+const router = useRouter();
 
-onMounted(() => {
+const showSpeechControl = ref(true);
 
+// 监听路由变化，切换页面时隐藏语音控制组件
+router.afterEach((to) => {
+  if (to.path === "/LargeScreen") {
+    showSpeechControl.value = false;
+  } else {
+    showSpeechControl.value = true;
+  }
 });
+
 </script>

src/router/index.js

@@ -7,6 +7,7 @@
 import { createRouter, createWebHistory } from 'vue-router'
 // 导入需要路由的组件
 import index from './../view/index.vue';
+import LargeScreen from '../view/LargeScreen/index.vue';
 
 const routes = [
   {
@@ -14,6 +15,12 @@ const routes = [
     name: 'index',
     component: index
   },
+  {
+    path:'/LargeScreen',
+    name:'大屏画布',
+    component:LargeScreen
+  }
+
 ]
 
 const router = createRouter({

src/view/LargeScreen/index.vue

@@ -0,0 +1,131 @@
+<!-- 大屏画布 -->
+<template>
+    <div class="MainPage">
+        <div class="LeftBox">
+            <h2>左侧工具栏</h2>
+            <el-tree style="max-width: 600px" :data="tooles" :props="defaultProps" @node-click="handleNodeClick"
+                highlight-current />
+        </div>
+        <div class="CenterBox">
+            <h2>画布区域</h2>
+            <div class="canvas-area">这里是大屏设计画布</div>
+        </div>
+        <div class="RightBox">
+            <h2>属性面板</h2>
+            <div class="property-item">尺寸</div>
+            <div class="property-item">位置</div>
+            <div class="property-item">样式</div>
+        </div>
+    </div>
+</template>
+<script setup>
+import { ref } from 'vue'
+const tooles = ref([
+    {
+        label: '大屏1',
+        children: [
+            {
+                label: '标题',
+            },
+            {
+                label: '货物数量',
+            },
+            {
+                label: '设备情况',
+            },
+            {
+                label: '吞吐统计',
+            },
+            {
+                label: '主元素',
+            },
+            {
+                label: '实时仓储剩余情况',
+            },
+            {
+                label: '综合评分',
+            },
+            {
+                label: '能好统计',
+            },
+        ],
+    },
+
+])
+</script>
+
+<style scoped>
+.MainPage {
+    width: 100vw;
+    height: 100vh;
+    background-color: #1a1a1a;
+    display: flex;
+    color: white;
+}
+
+.MainPage :deep(.el-tree) {
+    background-color: #333 !important;
+    color: #fff;
+}
+
+.MainPage :deep(.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content) {
+    background-color: #8497a5;
+    color: #fff;
+}
+
+.LeftBox,
+.RightBox {
+    width: 250px;
+    background-color: #252525;
+    padding: 15px;
+    border-right: 1px solid #333;
+}
+
+.RightBox {
+    border-right: none;
+    border-left: 1px solid #333;
+}
+
+.CenterBox {
+    flex: 1;
+    padding: 15px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+h2 {
+    margin-top: 0;
+    margin-bottom: 20px;
+    font-size: 18px;
+    color: #0078d4;
+    border-bottom: 1px solid #333;
+    padding-bottom: 10px;
+}
+
+.tool-item,
+.property-item {
+    padding: 10px;
+    margin-bottom: 8px;
+    background-color: #333;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+}
+
+.tool-item:hover,
+.property-item:hover {
+    background-color: #444;
+}
+
+.canvas-area {
+    width: 80%;
+    height: 70%;
+    background-color: #000;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border: 1px dashed #555;
+    border-radius: 4px;
+}
+</style>

src/view/components/projectModal.vue

@@ -4,6 +4,9 @@
     background: #535050 !important;
     padding: 0px !important;
 }
+    .Main :deep(.el-input__inner) {
+        color: #FFf;
+    }
 
 /* 自定义滚动条样式 - 默认隐藏 */
 .LeftBox::-webkit-scrollbar,
@@ -135,6 +138,12 @@
     margin-bottom: 10px;
     box-sizing: border-box;
     overflow: hidden;
+    cursor: pointer;
+}
+
+/* 激活项目分类 */
+.activeProject {
+    border: 1px solid #0e6ad3;
 }
 
 .LeftItem span {
@@ -163,22 +172,26 @@
     box-sizing: border-box;
     cursor: pointer;
     transition: all 0.3s ease;
-    background: #9e9898;
+    background: #494848;
     color: #fff;
 }
 
 .CenterItem:hover {
-    background: #9e9898;
+    background: #494848;
     transform: translateY(-2px);
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 }
 
+/* 激活大屏分类 */
+.ActiveCenterItem {
+    background: #0e6ad3;
+}
+
 .CenterItem img {
     width: 100%;
     height: 60px;
     object-fit: cover;
     border-radius: 4px;
-    margin-bottom: 8px;
 }
 
 .CenterItem span {
@@ -240,8 +253,8 @@
             </template>
             <div class="contentBox">
                 <div class="LeftBox">
-                    <div class="LeftItem" v-for="value in projectClassList"
+                    <div :class="['LeftItem', selectedProject  === value.id ? 'activeProject' : '']"
-                        :style="{ backgroundImage: `url(${value.img})` }">
+                        v-for="value in projectClassList" :style="{ backgroundImage: `url(${value.img})` }" @click="handleSelectProject(value.id)">
                         <span>{{ value.name }}</span>
                     </div>
                 </div>
@@ -250,7 +263,8 @@
                         <el-tabs v-model="activeName" class="demo-tabs">
                             <el-tab-pane label="全部" name="ALL">
                                 <div class="CenterBottom">
-                                    <div class="CenterItem" v-for="value in largeScreenClassList">
+                                    <div :class="['CenterItem', selectedLargeScreen === value.id ? 'ActiveCenterItem' : '']"
+                                        v-for="value in largeScreenClassList"  @click="handleSelectLargeScreen(value.id)">
                                         <img :src="value.img" alt="">
                                         <span>{{ value.name }}</span>
                                     </div>
@@ -267,7 +281,7 @@
                     <div class="FileInfo">文件信息：大小3MB</div>
                     <div class="NameBox">
                         <h4>项目名称</h4>
-                        <el-input placeholder="请输入名称" />
+                        <el-input placeholder="请输入名称" v-model="projectName"/>
                     </div>
                     <div class="FootBtn">
                         <el-button @click="handleClose">取消</el-button>
@@ -285,53 +299,71 @@ const open = ref(false)
 // 项目分类
 const projectClassList = [
     {
+        id: 1,
         name: '大屏看板',
         img: '/src/assets/images/sjdp1.png',
         url: '/dataScreen'
     },
     {
+        id: 2,
         name: '地图可视化',
         img: '/src/assets/images/sjdp2.png',
         url: '/dataScreen'
     },
     {
+        id: 3,
         name: '3D数字孪生',
         img: '/src/assets/images/sjdp1.png',
         url: '/dataScreen'
     },
     {
+        id: 4,
         name: '3D地理信息',
         img: '/src/assets/images/sjdp2.png',
         url: '/dataScreen'
     },
     {
+        id: 5,
         name: 'BI看板',
         img: '/src/assets/images/sjdp1.png',
         url: '/dataScreen'
     },
 ]
+
+// 选中项目
+const selectedProject = ref(1)
+
 // 大屏分类
+
 const largeScreenClassList = [
     {
+        id: 1,
         name: '空白项目',
         img: '/src/assets/images/sjdp1.png',
         url: '/dataScreen'
     },
     {
+        id: 2,
         name: '新手入门示列',
         img: '/src/assets/images/sjdp2.png',
         url: '/dataScreen'
     },
     {
+        id: 3,
         name: '大屏基础示列',
         img: '/src/assets/images/sjdp1.png',
         url: '/dataScreen'
     },
 
 ]
-
 // tab切换
 const activeName = ref('ALL')
+// 选中大屏
+const selectedLargeScreen = ref(1)
+
+// 项目名称
+const projectName = ref('')
+
 
 // 接收父级参数
 const props = defineProps({
@@ -354,6 +386,19 @@ watch(open, (newVal) => {
     emit('update:open', newVal)
 })
 
+// 切换项目分类
+const handleSelectProject = (id) => {
+    selectedProject.value = id
+}
+
+// 切换大屏分类
+const handleSelectLargeScreen = (id) => {
+    console.log("选中大屏",id);
+    selectedLargeScreen.value = id
+}
+
+
+
 // 处理提交
 const handleSubmit = () => {
     console.log('提交项目')

src/view/index.vue

@@ -33,7 +33,7 @@
       </div>
       <div class="line"></div>
       <!-- 导航菜单 -->
-      <nav class="nav-menu">
+      <!-- <nav class="nav-menu">
         <ul>
           <li @click="selectMenu(item)" v-for="item in menu" :class="item.active ? 'active' : ''">
             <el-icon :size="20">
@@ -42,7 +42,7 @@
             <span>{{ item.name }}</span>
           </li>
         </ul>
-      </nav>
+      </nav> -->
 
       <!-- 广告卡片 -->
       <el-card header-class="card-header" body-class="card-body">
@@ -141,7 +141,9 @@
 <script setup>
 // 新建项目弹窗
 import projectModal from '@/view/components/projectModal.vue'
-import { ref } from "vue";
+
+import { ref, getCurrentInstance } from "vue";
+import { useRouter } from "vue-router";
 const dialogVisible = ref(false)
 
 const menu = ref([
@@ -150,6 +152,11 @@ const menu = ref([
     icon: "DataAnalysis",
     active: true,
   },
+  {
+    name: "大屏画布",
+    icon: "DataAnalysis",
+    active: false,
+  },
   {
     name: "报表门户",
     icon: "TrendCharts",
@@ -186,6 +193,8 @@ const projects = ref([
   }
 ])
 
+const router = useRouter();
+
 const selectMenu = (data) => {
   menu.value.forEach((d) => {
     if (d.name === data.name) {
@@ -194,6 +203,11 @@ const selectMenu = (data) => {
       d.active = false;
     }
   });
+  if (data.name == "大屏画布") {
+    router.push('/LargeScreen');
+  } else {
+    router.push('/');
+  }
 };
 
 const handleClick = (tab, event) => {