完善大屏画布
This commit is contained in:
parent
602d84ca24
commit
2cdc195b8f
16
src/App.vue
16
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>
|
||||
|
|
|
|||
|
|
@ -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({
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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"
|
||||
:style="{ backgroundImage: `url(${value.img})` }">
|
||||
<div :class="['LeftItem', selectedProject === value.id ? 'activeProject' : '']"
|
||||
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('提交项目')
|
||||
|
|
|
|||
|
|
@ -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) => {
|
||||
|
|
|
|||
Loading…
Reference in New Issue