菜单预览

core/core-frontend/src/components/visualization/UserViewEnlarge.vue

@@ -51,7 +51,7 @@
             "
             @click="downloadViewDetails('view')"
           >
-            <el-icon color="#1F2329" size="16" style="margin-right: 3px"
+            <el-icon color="#ffffff" size="16" style="margin-right: 3px"
               ><icon_download_outlined
             /></el-icon>
             {{ t('chart.export_excel') }}
@@ -68,7 +68,7 @@
               state.dataFrom === 'template'
             "
           >
-            <el-icon color="#1F2329" size="16" style="margin-right: 3px"
+            <el-icon color="#ffffff" size="16" style="margin-right: 3px"
               ><icon_download_outlined
             /></el-icon>
             {{ t('chart.export_raw_details') }}

core/core-frontend/src/router/index.ts

@@ -219,6 +219,13 @@ export const routes: AppRouteRecordRaw[] = [
     hidden: true,
     meta: {},
     component: () => import('@/viewsnew/application/menuconfig/index.vue')
+  },
+  {
+    path: '/PreviewSystem',
+    name: 'PreviewSystem',
+    hidden: true,
+    meta: {},
+    component: () => import('@/viewsnew/application/PreviewSystem.vue')
   }
 ]
 

core/core-frontend/src/viewsnew/application/PreviewSystem.vue

@@ -0,0 +1,42 @@
+<script lang="ts" setup>
+import { ref, onMounted } from 'vue'
+import Navbar from '@/viewsnew/application/module/Navbar/index.vue'
+import { useRoute, useRouter } from 'vue-router'
+import { getMenuTree } from '@/api/permission/menu'
+const route = useRoute()
+const applicationId:any = ref('')
+const menuList = ref([])
+const isNavbar = ref(false)
+const projectName:any = ref('')
+onMounted(()=>{
+    if (route.query.id) {
+        applicationId.value = route.query.id
+        projectName.value = route.query.name
+        getmenuinfo()
+    }
+})
+function getmenuinfo() {
+   const params = { 
+    appId: applicationId.value,
+    name:'',
+    isdisplay:''
+   }
+   getMenuTree(params).then(res => {
+    menuList.value = res.data
+    isNavbar.value = true
+   })
+}
+</script>
+<template>
+    <div class="system-box">
+        <Navbar v-if="isNavbar" :menuList="menuList" :projectName="projectName" 
+        :isFixed="true" :applicationId="applicationId"></Navbar>
+    </div>
+</template>
+
+<style lang="less" scoped>
+.system-box {
+    width: 100%;
+    height: 100vh;
+}
+</style>

core/core-frontend/src/viewsnew/application/index.vue

@@ -68,6 +68,13 @@ function delClick(row){
     })
  
 }
+function preview(row){
+  const route = router.resolve({
+    path: '/PreviewSystem',
+    query: { id: row.id,name:row.name }
+  });
+  window.open(route.href, '_blank');
+}
 </script>
 <template>
   <div class="common-layout">
@@ -112,7 +119,7 @@ function delClick(row){
             <img src="@/assets/newimg/icon/del.png" alt="" title="删除" @click="delClick(item)">
           </div>
           <div style="display: flex;justify-content: center;">
-            <div class="yulan">预览</div>
+            <div class="yulan" @click="preview(item)">预览</div>
             <div class="mokuaipeizhi" @click="routerClick(item,'/module')">模块配置</div>
           </div>
         </div>

core/core-frontend/src/viewsnew/application/menuconfig/assocmenu.vue

@@ -9,6 +9,7 @@ import { ElTree,FormInstance } from 'element-plus'
 import { publicTree } from '@/utils/validate';
 import { setModuleId } from '@/api/permission/menu'
 import { ElMessage, ElMessageBox } from 'element-plus'
+import Navbar from '@/viewsnew/application/module/Navbar/index.vue'
 const props = defineProps({
   applicationId:String,
   assoccurrentid:String,
@@ -43,6 +44,7 @@ const assocmenuname = ref('')
 const moduletreeData = ref([])
 const moduletreeRef = ref<InstanceType<typeof ElTree>>()
 const assoccurrentid = ref('')
+const isNavbar = ref(false)
 const loadCanvasData = (dvId, weight?, ext?) => {
   const initMethod = initCanvasData
   dataInitState.value = false
@@ -81,6 +83,7 @@ const handleNodeClick = (e: any) => {
    // 树节点点击
   isFormCreate.value = false
   dataInitState.value = false
+  isNavbar.value = false
   if(e.type == '0301'){
     busiFlag.value = 'dashboard'
     loadCanvasData(e.id,9,0)
@@ -90,6 +93,8 @@ const handleNodeClick = (e: any) => {
   }else if(e.type == '09'){
     moduleInfo.value = e
     isFormCreate.value = true
+  } else if(e.type == '02'){
+    isNavbar.value = true
   }
   rightloading.value = false
 }
@@ -198,6 +203,7 @@ function handleDatasetName() {
             :download-status="downloadStatus"
           ></dv-preview> 
           <form-create v-if="isFormCreate" :moduleInfo="moduleInfo"></form-create>
+          <Navbar v-if="isNavbar"></Navbar>
             </div>
            
           </div>

core/core-frontend/src/viewsnew/application/menuconfig/assocmodule.vue

@@ -5,6 +5,7 @@ import FormCreate from '@/viewsnew/common/FormCreate.vue'
 import { initCanvasData } from '@/utils/canvasUtils'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import { moduleList } from '@/api/application/module'
+import Navbar from '@/viewsnew/application/module/Navbar/index.vue'
 const props = defineProps({
     moduleinfo:Object,
     applicationId:String
@@ -25,6 +26,7 @@ const busiFlag = ref('dataV')
 const dataInitState = ref(true)
 const downloadStatus = ref(false)
 const loading = ref(false)
+const isNavbar = ref(false)
 const loadCanvasData = (dvId, weight?, ext?) => {
   const initMethod = initCanvasData
   dataInitState.value = false
@@ -84,6 +86,7 @@ console.log(props.applicationId,props.moduleinfo)
 function handleNodeClick(e){
   isFormCreate.value = false
   dataInitState.value = false
+  isNavbar.value = false
   if(e.type == '0301'){
     busiFlag.value = 'dashboard'
     loadCanvasData(e.id,9,0)
@@ -93,12 +96,14 @@ function handleNodeClick(e){
   }else if(e.type == '09'){
     moduleInfo.value = e
     isFormCreate.value = true
+  } else if(e.type == '02'){
+    isNavbar.value = true
   }
   loading.value = false
 }
 </script>
 <template>
-    <div v-loading="loading" style="width: 100%;height: 100%;">
+    <div v-loading="loading" style="width: 100%;height: 100%;overflow: hidden;">
         <dv-preview
             ref="dvPreviewRef"
             class="dvPreviewRef"
@@ -112,6 +117,7 @@ function handleNodeClick(e){
             :download-status="downloadStatus"
           ></dv-preview> 
           <form-create v-if="isFormCreate" :moduleInfo="moduleInfo"></form-create>  
+          <Navbar v-if="isNavbar"></Navbar>
     </div>
 </template>
 <style lang="less" scoped>

core/core-frontend/src/viewsnew/application/module/Navbar/index.vue

@@ -1,99 +1,216 @@
 <script lang="ts" setup>
-import { ref, onMounted } from 'vue'
+import { ref, onMounted,onBeforeUnmount,shallowRef } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
-
+import Assocmodule from '@/viewsnew/application/menuconfig/assocmodule.vue'
-const navtitle = ref('这里显示的是一个标题的名称')
+const props = defineProps({
-const navmenulist = ref([
+    menuList:Object,
-    { name: '菜单名称1', children: [{ name: '子菜单名称1' }] },
+    isFixed:  Boolean,
-    { name: '菜单名称2', children: [] },
+    projectName:String,
-    { name: '菜单名称3', children: [{ name: '子菜单名称1' }, { name: '子菜单名称2' }] },
+    applicationId:String
-    { name: '菜单名称4', children: [{ name: '子菜单名称1' }] },
+})
+const navtitle = ref('')
+const navmenulist:any = ref([
 ])
 const checkindex = ref(null)
+const showmodule = ref(false)
+const currentMoudleId = ref('')
+function menuclick(index:any) {
+    if(navmenulist.value[index].children.length == 0 || navmenulist.value[index].children == undefined){
+        checkindex.value = index
+        currentMoudleId.value = navmenulist.value[index].module_id
+    }
+}
+function childmenuclick(item:any){
+  if(item.module_id && item.module_id !== ''){
+    currentMoudleId.value = item.module_id
+    showmodule.value = true
+  }else{
+    showmodule.value = false
+  }
+}
+// 时间相关逻辑移动到独立组件中
+const TimeDisplay = {
+  template: `
+    <div class="Navbar-menu-time">
+      <div class="Navbar-menu-time-text">{{ currentTime }}</div>
+      <div class="Navbar-menu-time-text2">{{ currentDate }}</div>
+    </div>
+  `,
+  setup() {
+    const currentTime = shallowRef('')
+    const currentDate = shallowRef('')
+    let timer: number
+    
+    function updateTime() {
+      const now = new Date();
+      const hours = String(now.getHours()).padStart(2, '0');
+      const minutes = String(now.getMinutes()).padStart(2, '0');
+      const seconds = String(now.getSeconds()).padStart(2, '0');
+      const year = now.getFullYear();
+      const month = String(now.getMonth() + 1).padStart(2, '0');
+      const day = String(now.getDate()).padStart(2, '0');
+      const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
+      const weekday = weekdays[now.getDay()];
+      currentTime.value = `${hours}:${minutes}:${seconds}`;
+      currentDate.value = `${year}-${month}-${day} ${weekday}`;
+    }
+    
+    onMounted(() => {
+      updateTime()
+      timer = setInterval(updateTime, 1000)
+    })
+    
+    onBeforeUnmount(() => {
+      clearInterval(timer)
+    })
+    
+    return { currentTime, currentDate }
+  }
+}
+onMounted(() => {
+    navmenulist.value = props.menuList
+    navtitle.value = props.projectName
+})
+onBeforeUnmount(() => {
+ 
+});
 </script>
 <template>
-    <div class="Navbar-box">
+    <div class="system-box">
-        <div class="Navbar-box-titie">{{ navtitle }}</div>
+        <div class="Navbar-box">
-        <div class="Navbar-menu-box">
+            <div class="Navbar-box-titie">{{ navtitle }}</div>
-            <div class="Navbar-menu-content">
+            <div class="Navbar-menu-box">
-                <div class="Navbar-menu-time">
+                <div class="Navbar-menu-content">
-                    <div class="Navbar-menu-time-text">12:45:35</div>
+                    <TimeDisplay />
-                    <div class="Navbar-menu-time-text2">2022-08-16 星期二</div>
+                    <div class="Navbar-menu-item"
+                        :class="{ 'Navbar-menu-items': checkindex == index && item.children.length == 0 }"
+                        v-for="(item, index) in navmenulist" :key="index" @click="menuclick(index)">
+                        <div v-if="item.children.length == 0">{{ item.name }}</div>
+                        <el-popover v-else class="tsmenu" placement="bottom" popper-class="tsmenu-popover">
+                            <div v-for="(items, indexs) in item.children" :key="indexs"
+                                class="Navbar-menu-item-child-item" @click.stop="childmenuclick(items)">
+                                {{ items.name }}
+                            </div>
+                            <template #reference>
+                                <div v-if="item.children.length > 0">{{ item.name }}</div>
+                            </template>
+                        </el-popover>
+                    </div>
                 </div>
-                <div class="Navbar-menu-item"  v-for="(item, index) in navmenulist" :key="index">
+                <div class="Navbar-box-right">
-                    <div>{{ item.name }}</div>
+                    <div style="margin-right: 10px;"><img src="@/assets/img/nav1.png" alt=""></div>
+                    <div style="margin-right: 15px;min-width: 45px;">admin</div>
+                    <div style="margin-right: 15px;"><img src="@/assets/img/nav3.png" alt=""></div>
+                    <div><img src="@/assets/img/nav4.png" alt=""></div>
                 </div>
             </div>
-            <div class="Navbar-box-right">
+        </div>
-                <div style="margin-right: 10px;"><img src="@/assets/img/nav1.png" alt=""></div>
+        <div class="system-box-content" :style="{height:props.isFixed?'calc(100vh - 65px)':'calc(100vh - 125px)'}">
-                <div style="margin-right: 15px;">admin</div>
+            <Assocmodule v-if="showmodule" :applicationId="applicationId" :moduleinfo="{module_id:currentMoudleId}" />
-                <div style="margin-right: 15px;"><img src="@/assets/img/nav3.png" alt=""></div>
-                <div><img src="@/assets/img/nav4.png" alt=""></div>
-            </div>
         </div>
     </div>
 </template>
 
 <style lang="less" scoped>
-.Navbar-box {
+.system-box {
     width: 100%;
-    height: 65px;
+    height: 100%;
-    display: flex;
+    background-color: rgb(0,52,102);
-    align-items: center;
+    .Navbar-box {
-    color: #fff;
+        width: 100%;
-    background: url(@/assets/img/navbg.png);
+        height: 65px;
-    background-size: 100% 100%;
-    padding-left: 25px;
-
-    .Navbar-box-titie {
-        font-size: 25px;
-        font-weight: 700;
-        background: linear-gradient(to bottom, #ffffff, #0089ff);
-        -webkit-background-clip: text;
-        background-clip: text;
-        color: transparent;
-        width: 340px;
-    }
-
-    .Navbar-menu-box {
-        width: calc(100% - 340px);
         display: flex;
         align-items: center;
-        padding-left: 43px;
+        color: #fff;
-        padding-right: 20px;
+        background: url(@/assets/img/navbg.png) no-repeat;
-        justify-content: space-between;
+        background-size: 100% 100%;
+        padding-left: 25px;
+        .Navbar-box-titie {
+            font-size: 25px;
+            font-weight: 700;
+            background: linear-gradient(to bottom, #ffffff, #0089ff);
+            -webkit-background-clip: text;
+            background-clip: text;
+            color: transparent;
+            width: 340px;
+        }
 
-        .Navbar-menu-content {
+        .Navbar-menu-box {
+            width: calc(100% - 340px);
             display: flex;
             align-items: center;
+            padding-left: 43px;
+            padding-right: 20px;
+            justify-content: space-between;
 
-            .Navbar-menu-time {
+            .Navbar-menu-content {
-                width: 150px;
+                width: 100%;
-                .Navbar-menu-time-text {
+                display: flex;
-                    font-size: 16px;
+                align-items: center;
-                    font-weight: 700;
+
+                .Navbar-menu-time {
+                    width: 150px;
+
+                    .Navbar-menu-time-text {
+                        font-size: 16px;
+                        font-weight: 700;
+                    }
+
+                    .Navbar-menu-time-text2 {
+                        font-size: 13px;
+                        font-weight: 700;
+                    }
                 }
 
-                .Navbar-menu-time-text2 {
+                .Navbar-menu-item {
-                    font-size: 13px;
+                    font-size: 14px;
-                    font-weight: 700;
+                    padding: 5px 15px;
+                    background: url(@/assets/img/navmenu.png) no-repeat;
+                    background-size: 100% 100%;
+                    margin-left: 15px;
+                    cursor: pointer;
+                    position: relative;
                 }
+
+                .Navbar-menu-items {
+                    background: url(@/assets/img/navmenucheck.png)  no-repeat;
+                    background-size: 100% 100%;
+                }
+
             }
-            .Navbar-menu-item{
+
+            .Navbar-box-right {
+                width: 165px;
+                display: flex;
+                align-items: center;
                 font-size: 14px;
-                padding: 5px 15px;
-                background: url(@/assets/img/navmenu.png);
-                background-size: 100% 100%;
-                margin-left: 15px;
             }
         }
 
-        .Navbar-box-right {
+    }
-            width: 165px;
+
-            display: flex;
+    .system-box-content {
-            align-items: center;
+        width: 100%;
-            font-size: 14px;
-        }
     }
 }
+</style>
+<style>
+.tsmenu-popover.ed-popover.ed-popper {
+    background: linear-gradient(to bottom, rgba(0, 52, 102, 1), rgba(0, 55, 110, 0.5));
+    color: #fff;
+    border: none;
+    border-radius: 0px;
+    padding: 5px 0px;
+}
+
+.tsmenu-popover .Navbar-menu-item-child-item {
+    padding: 5px 15px;
+    cursor: pointer;
+    text-align: center;
+}
+.tsmenu-popover .Navbar-menu-item-child-item:hover {
+    color: rgb(0, 255, 254);
+    background: rgb(2, 88, 161);
+    font-weight:700;
+}
 </style>