首页页面调整

vol-vue3/src/views/Index.vue

@@ -7,20 +7,14 @@
       </div>
       <div class="vol-menu">
         <el-scrollbar style="height: 100%">
-          <VolMenu
+          <VolMenu :currentMenuId="currentMenuId" :on-select="onSelect" :enable="true" :open-select="false"
-            :currentMenuId="currentMenuId"
+            :isCollapse="isCollapse" :list="menuOptions"></VolMenu>
-            :on-select="onSelect"
-            :enable="true"
-            :open-select="false"
-            :isCollapse="isCollapse"
-            :list="menuOptions"
-          ></VolMenu>
         </el-scrollbar>
       </div>
     </div>
     <div class="vol-container" :style="{ left: menuWidth - 1 + 'px' }">
       <div class="vol-header">
-        <div class="project-name">{{departName}}</div>
+        <div class="project-name">{{ departName }}</div>
         <div class="header-text">
           <!-- <div class="h-link">
             <a
@@ -35,25 +29,28 @@
               <i v-else :class="item.icon"></i>
             </a>
           </div> -->
+          <div class="h-link">
+            <a href="javascript:void(0)" @click="to(item)" v-for="(item, index) in links.filter((c) => {
+              return !c.icon;
+            })" :key="index">
+              <span v-if="!item.icon"> {{ item.text }}</span>
+              <i v-else :class="item.icon"></i>
+            </a>
+          </div>
         </div>
         <div class="header-info">
           <div class="h-link">
-            <a
+            <a href="javascript:void(0)" @click="to(item)" v-for="(item, index) in links.filter((c) => {
-              href="javascript:void(0)"
+              return c.icon;
-              @click="to(item)"
+            })" :key="index">
-              v-for="(item, index) in links.filter((c) => {
-                return c.icon;
-              })"
-              :key="index"
-            >
               <span v-if="!item.icon"> {{ item.text }}</span>
               <i v-else :class="item.icon"></i>
             </a>
           </div>
           <!--消息管理-->
-          <div class="h-link" @click="messageModel = true">
+          <!-- <div class="h-link" @click="messageModel = true">
             <a><i class="el-icon-message-solid"></i></a>
-          </div>
+          </div> -->
           <div>
             <img class="user-header" :src="userImg" :onerror="errorImg" />
           </div>
@@ -62,65 +59,37 @@
             <span id="index-date"></span>
           </div>
           <div class="settings">
-            <i
+            <i style="font-size: 20px" class="el-icon-s-tools" @click="drawer_model = true" />
-              style="font-size: 20px"
-              class="el-icon-s-tools"
-              @click="drawer_model = true"
-            />
           </div>
         </div>
       </div>
       <div class="vol-path">
-        <el-tabs
+        <el-tabs @tab-click="selectNav" @tab-remove="removeNav" @contextmenu.prevent="bindRightClickMenu(false)"
-          @tab-click="selectNav"
+          type="border-card" class="header-navigation" v-model="selectId" :strtch="false">
-          @tab-remove="removeNav"
+          <el-tab-pane v-for="(item, navIndex) in navigation" type="card" :name="navIndex + ''" :closable="navIndex > 0"
-          @contextmenu.prevent="bindRightClickMenu(false)"
+            :key="navIndex" :label="item.name">
-          type="border-card"
-          class="header-navigation"
-          v-model="selectId"
-          :strtch="false"
-        >
-          <el-tab-pane
-            v-for="(item, navIndex) in navigation"
-            type="card"
-            :name="navIndex + ''"
-            :closable="navIndex > 0"
-            :key="navIndex"
-            :label="item.name"
-          >
             <span style="display: none">{{ navIndex }}</span>
           </el-tab-pane>
         </el-tabs>
         <!-- 右键菜单 -->
         <div v-show="contextMenuVisible">
-          <ul
+          <ul :style="{ left: menuLeft + 'px', top: menuTop + 'px' }" class="contextMenu">
-            :style="{ left: menuLeft + 'px', top: menuTop + 'px' }"
-            class="contextMenu"
-          >
             <li v-show="visibleItem.all">
               <el-button link @click="closeTabs()">
                 <i class="el-icon-close"></i>
                 {{
                   navigation.length == 2 ? "关闭菜单" : "关闭所有"
-                }}</el-button
+                }}</el-button>
-              >
             </li>
             <li v-show="visibleItem.left">
-              <el-button link @click="closeTabs('left')" 
+              <el-button link @click="closeTabs('left')"><i class="el-icon-back"></i>关闭左边</el-button>
-                ><i class="el-icon-back"></i>关闭左边</el-button
-              >
             </li>
             <li v-show="visibleItem.right">
-              <el-button link @click="closeTabs('right')" >
+              <el-button link @click="closeTabs('right')">
-                <i class="el-icon-right"></i>关闭右边</el-button
+                <i class="el-icon-right"></i>关闭右边</el-button>
-              >
             </li>
             <li v-show="visibleItem.other">
-              <el-button
+              <el-button link @click="closeTabs('other')"><i class="el-icon-right"></i>关闭其他
-              link
-                @click="closeTabs('other')"
-             
-                ><i class="el-icon-right"></i>关闭其他
               </el-button>
             </li>
           </ul>
@@ -131,52 +100,26 @@
           <loading v-show="$store.getters.isLoading()"></loading>
           <router-view v-slot="{ Component }">
             <keep-alive>
-              <component
+              <component :is="Component" :key="$route.name"
-                :is="Component"
+                v-if="!$route.meta || ($route.meta && !$route.meta.hasOwnProperty('keepAlive'))" />
-                :key="$route.name"
-                v-if="!$route.meta ||($route.meta && !$route.meta.hasOwnProperty('keepAlive'))"
-              />
             </keep-alive>
-            <component
+            <component :is="Component" :key="$route.name" v-if="$route.meta && $route.meta.hasOwnProperty('keepAlive')" />
-              :is="Component"
-              :key="$route.name"
-              v-if="$route.meta && $route.meta.hasOwnProperty('keepAlive')"
-            />
           </router-view>
         </el-scrollbar>
       </div>
     </div>
-    <el-drawer
+    <el-drawer title="选择主题" v-model="drawer_model" direction="rtl" destroy-on-close>
-      title="选择主题"
-      v-model="drawer_model"
-      direction="rtl"
-      destroy-on-close
-    >
       <div class="theme-selector">
-        <div
+        <div @click="changeTheme(item.name)" class="item" v-for="(item, index) in theme_color" :key="index"
-          @click="changeTheme(item.name)"
+          :style="{ background: item.color }">
-          class="item"
+          <div v-show="item.leftColor" :style="{ background: item.leftColor }" style="height: 100%; width: 20px"
-          v-for="(item, index) in theme_color"
+            class="t-left"></div>
-          :key="index"
-          :style="{ background: item.color }"
-        >
-          <div
-            v-show="item.leftColor"
-            :style="{ background: item.leftColor }"
-            style="height: 100%; width: 20px"
-            class="t-left"
-          ></div>
           <div class="t-right"></div>
         </div>
       </div>
     </el-drawer>
 
-    <el-drawer
+    <el-drawer title="消息列表" v-model="messageModel" direction="rtl" destroy-on-close>
-      title="消息列表"
-      v-model="messageModel"
-      direction="rtl"
-      destroy-on-close
-    >
       <Message :list="messageList"></Message>
     </el-drawer>
   </div>
@@ -248,21 +191,22 @@ export default defineComponent({
       { name: "white", color: "#fff" },
     ]);
     const links = ref([
-      {
+      // {
-        text: "框架视频",
+      //   text: "框架视频",
-        path: "https://www.cctalk.com/m/group/90268531",
+      //   path: "https://www.cctalk.com/m/group/90268531",
-        id: -3,
+      //   id: -3,
-      },
+      // },
-      { text: "大屏数据", path: "/bigdata", id: -3 },
+      // { text: "大屏数据", path: "/bigdata", id: -3 },
-      {
+      // {
-        text: "框架文档",
+      //   text: "框架文档",
-        path: "http://v2.volcore.xyz/document/guide",
+      //   path: "http://v2.volcore.xyz/document/guide",
-        id: -2,
+      //   id: -2,
-      },   {
+      // },   {
-        text: "框架企业版",
+      //   text: "框架企业版",
-        path: "http://pro.volcore.xyz/",
+      //   path: "http://pro.volcore.xyz/",
-        id: 10,
+      //   id: 10,
-      },
+      // },
+      { text: "大屏数据", path: "/dataview", id: -5, icon: "el-icon-news"},
       { text: "个人中心", path: "/UserInfo", id: -1, icon: "el-icon-s-custom" },
       {
         text: "安全退出",
@@ -622,7 +566,7 @@ export default defineComponent({
     const getDepartName = () => {
       // departName.value = "长江云息设备集团";
       http.get("api/Sys_Department/getUserDepartment", {}, true).then((data) => {
-         departName.value = data.DepartmentName;
+        departName.value = data.DepartmentName;
       });
     }
 
@@ -763,7 +707,9 @@ function showTime() {
   font-size: 14px;
   color: #333;
   box-shadow: 2px 2px 3px 0 rgb(182 182 182 / 20%);
-  i,button{
+
+  i,
+  button {
     font-size: 14px !important;
   }
 }
@@ -784,12 +730,8 @@ function showTime() {
   letter-spacing: 1px;
 }
 
-.el-tabs.el-tabs--top.el-tabs--border-card.header-navigation
+.el-tabs.el-tabs--top.el-tabs--border-card.header-navigation>.el-tabs__header .el-tabs__item:last-child,
-  > .el-tabs__header
+.el-tabs--top.el-tabs--border-card.header-navigation>.el-tabs__header .el-tabs__item:nth-child(2) {
-  .el-tabs__item:last-child,
-.el-tabs--top.el-tabs--border-card.header-navigation
-  > .el-tabs__header
-  .el-tabs__item:nth-child(2) {
   padding: 0;
 }