Merge branch 'main' of http://172.16.1.12/jiwanjun/ai-speech-build

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,31 +4,12 @@
     background: rgba(38, 39, 42, 1) !important;
     padding: 0px !important;
 }
+    .Main :deep(.el-input__inner) {
+        color: #FFf;
+    }
 
-/* 自定义滚动条样式 - 默认隐藏 */
-.LeftBox::-webkit-scrollbar,
-.CenterBox::-webkit-scrollbar,
-.RightBox::-webkit-scrollbar {
-    width: 0px;
-    transition: width 0.3s ease;
-}
 
-.LeftBox::-webkit-scrollbar-track,
-.CenterBox::-webkit-scrollbar-track,
-.RightBox::-webkit-scrollbar-track {
-    background: transparent;
-    border-radius: 4px;
-}
 
-.LeftBox::-webkit-scrollbar-thumb,
-.CenterBox::-webkit-scrollbar-thumb,
-.RightBox::-webkit-scrollbar-thumb {
-    background: transparent;
-    border-radius: 4px;
-    transition: background 0.3s ease;
-}
-
-/* 鼠标悬停时显示滚动条 */
 .LeftBox:hover::-webkit-scrollbar,
 .CenterBox:hover::-webkit-scrollbar,
 .RightBox:hover::-webkit-scrollbar {
@@ -53,16 +34,11 @@
     background: #888;
 }
 
-/* 对话框整体滚动条样式 - 默认隐藏 */
 .Main :deep(.el-dialog__body)::-webkit-scrollbar {
     width: 0px;
     transition: width 0.3s ease;
 }
 
-.Main :deep(.el-dialog__body)::-webkit-scrollbar-track {
-    background: transparent;
-    border-radius: 4px;
-}
 
 .Main :deep(.el-dialog__body)::-webkit-scrollbar-thumb {
     background: transparent;
@@ -70,15 +46,6 @@
     transition: background 0.3s ease;
 }
 
-/* 对话框悬停时显示滚动条 */
-.Main:hover :deep(.el-dialog__body)::-webkit-scrollbar {
-    width: 8px;
-}
-
-.Main:hover :deep(.el-dialog__body)::-webkit-scrollbar-track {
-    background: #3a3a3a;
-}
-
 .Main:hover :deep(.el-dialog__body)::-webkit-scrollbar-thumb {
     background: #666;
 }
@@ -197,6 +164,11 @@
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 }
 
+/* 激活大屏分类 */
+.ActiveCenterItem {
+    background: #0e6ad3;
+}
+
 .CenterItem img {
     width: 100%;
     height: 120px;
@@ -347,6 +319,7 @@ const selectTemplateValue = ref({
 // 项目分类
 const projectClassList = [
     {
+        id: 1,
         name: '大屏看板',
         img: '/src/assets/images/sjdp2.png',
         url: '/dataScreen',
@@ -358,6 +331,7 @@ const projectClassList = [
     //     url: '/dataScreen'
     // },
     {
+        id: 3,
         name: '3D数字孪生',
         img: '/src/assets/images/sjdp1.png',
         url: '/dataScreen',
@@ -374,9 +348,15 @@ const projectClassList = [
     //     url: '/dataScreen'
     // },
 ]
+
+// 选中项目
+const selectedProject = ref(1)
+
 // 大屏分类
+
 const largeScreenClassList = [
     {
+        id: 1,
         name: '空白项目',
         img: '',
         url: '/dataScreen',
@@ -385,6 +365,7 @@ const largeScreenClassList = [
         size: 0
     },
     {
+        id: 2,
         name: '新手入门示列',
         img: '/src/assets/images/sjdp2.png',
         url: '/dataScreen',
@@ -393,6 +374,7 @@ const largeScreenClassList = [
         size: 3
     },
     {
+        id: 3,
         name: '大屏基础示列',
         img: '/src/assets/images/sjdp1.png',
         url: '/dataScreen',
@@ -402,9 +384,12 @@ const largeScreenClassList = [
     },
 
 ]
-
 // tab切换
 const activeName = ref('ALL')
+// 选中大屏
+const selectedLargeScreen = ref(1)
+
+// 项目名称
 
 // 接收父级参数
 const props = defineProps({

src/view/index.vue

@@ -132,7 +132,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([
@@ -141,6 +143,11 @@ const menu = ref([
     icon: "DataAnalysis",
     active: true,
   },
+  {
+    name: "大屏画布",
+    icon: "DataAnalysis",
+    active: false,
+  },
   {
     name: "报表门户",
     icon: "TrendCharts",
@@ -178,6 +185,8 @@ const projects = ref([
   }
 ])
 
+const router = useRouter();
+
 const selectMenu = (data) => {
   menu.value.forEach((d) => {
     if (d.name === data.name) {
@@ -186,6 +195,11 @@ const selectMenu = (data) => {
       d.active = false;
     }
   });
+  if (data.name == "大屏画布") {
+    router.push('/LargeScreen');
+  } else {
+    router.push('/');
+  }
 };
 
 const handleClick = (tab, event) => {