更新为iot edge 框架样式

.env.development

@@ -1,4 +1,5 @@
 NODE_ENV=development
+# VUE_APP_API_BASE_URL=http://192.168.2.244:8520/jeecg-boot
 VUE_APP_API_BASE_URL=http://localhost:8520/jeecg-boot
 VUE_APP_CAS_BASE_URL=http://cas.example.org:8443/cas
 VUE_APP_ONLINE_BASE_URL=http://fileview.jeecg.com/onlinePreview

src/assets/less/common.css

@@ -61,7 +61,7 @@
 .jee-hidden {
   display: none;
 }
-/**IoT Edge 修改框架 */
+/**IoT Edge相关 修改框架 */
 .ant-btn-primary {
   background: linear-gradient(0deg, rgba(1, 159, 243, 0.4), rgba(138, 210, 249, 0.4)) !important;
   background-color: #0fabfe !important;

src/assets/less/common.less

@@ -60,7 +60,7 @@
 /**隐藏样式-modal确定按钮 */
 .jee-hidden{display: none}
 
-/**IoT Edge 修改框架 */
+/**IoT Edge相关 修改框架 */
 .ant-btn-primary{
    background: linear-gradient(0deg,rgba(1,159,243,.4),rgba(138,210,249,.4)) !important;
    background-color: #0fabfe!important;

src/components/menu/SideMenu.vue

@@ -1,11 +1,13 @@
 <template>
   <a-layout-sider
-    :class="['sider', isDesktop() ? null : 'shadow', theme, fixSiderbar ? 'ant-fixed-sidemenu' : null ]"
+    :class="['sider', 'iot-menu-set', isDesktop() ? null : 'shadow', theme, fixSiderbar ? 'ant-fixed-sidemenu' : null ]"
     width="208px"
     :collapsible="collapsible"
     v-model="collapsed"
     :trigger="null">
-    <logo />
+    <!-- IoT Edge相关 修改框架 -->
+    <logo v-if="layoutMode !== 'iotmenu'" />
+    <!-- <logo /> -->
     <s-menu
       :collapsed="collapsed"
       :menu="menus"
@@ -76,6 +78,37 @@
     }
   }
 </script>
+<style lang="less">
+  // IoT Edge相关 修改框架
+  .iot-menu-set{
+    padding-top: 12px;
+    background: linear-gradient(0deg,#e6edf3,#fff) !important;
+    ul.ant-menu {
+      background-color: transparent;
+      .ant-menu-item{
+        margin: 0;
+      }
+    }
+    // 选种样式
+    .ant-menu-submenu-selected{
+      // 父级菜单
+      .ant-menu-submenu-title{
+        background-color: #1890ff !important;
+        color: #fff;
+        margin: 0;
+      }
+      // 子级
+      .ant-menu-item-selected{
+        background: linear-gradient(90deg,hsla(0,0%,100%,0),rgba(1,159,243,.5));
+      }
+    }
+    .ant-menu-submenu-open{
+      .ant-menu-submenu-title{
+        background: linear-gradient(90deg,hsla(0,0%,100%,0),rgba(1,159,243,.5));
+      }
+    }
+  }
+</style>
 <style lang="less" scoped>
 
   /* update_begin author:sunjianlei date:20190509 for: 修改侧边导航栏滚动条的样式 */

src/components/page/GlobalHeader.vue

@@ -25,26 +25,45 @@
 
       <user-menu :theme="theme"/>
     </div>
-    <!-- 顶部导航栏模式 -->
-    <div v-else :class="['top-nav-header-index', theme]">
-      <div class="header-index-wide">
-        <div class="header-index-left" :style="topMenuStyle.headerIndexLeft">
-          <logo class="top-nav-header" :show-title="device !== 'mobile'" :style="topMenuStyle.topNavHeader"/>
-          <div v-if="device !== 'mobile'" :style="topMenuStyle.topSmenuStyle">
-            <s-menu
-              mode="horizontal"
-              :menu="menus"
-              :theme="theme"
-              @updateMenuTitle="handleUpdateMenuTitle"
-            ></s-menu>
+    <!-- IoT Edge相关 修改框架 -->
+    <div v-if="mode === 'iotmenu'" class="header iotmenu-header" :class="theme">
+      <div class="top-line"></div>
+      <div class="iotmenu-header-content">
+        <a-icon
+          v-if="device==='mobile'"
+          class="trigger"
+          :type="collapsed ? 'menu-fold' : 'menu-unfold'"
+          @click="toggle"></a-icon>
+        <a-icon
+          v-else
+          class="trigger"
+          :type="collapsed ? 'menu-unfold' : 'menu-fold'"
+          @click="toggle"/>
+        <span v-if="device === 'desktop'" style="font-size: 20px;">联锁管理平台</span>
+        <span v-else>联锁管理平台</span>
+        <user-menu :theme="theme"/>
+      </div>
+      <!-- 顶部导航栏模式 -->
+      <div v-if="mode === 'topmenu'" :class="['top-nav-header-index', theme]">
+        <div class="header-index-wide">
+          <div class="header-index-left" :style="topMenuStyle.headerIndexLeft">
+            <logo class="top-nav-header" :show-title="device !== 'mobile'" :style="topMenuStyle.topNavHeader"/>
+            <div v-if="device !== 'mobile'" :style="topMenuStyle.topSmenuStyle">
+              <s-menu
+                mode="horizontal"
+                :menu="menus"
+                :theme="theme"
+                @updateMenuTitle="handleUpdateMenuTitle"
+              ></s-menu>
+            </div>
+            <a-icon
+              v-else
+              class="trigger"
+              :type="collapsed ? 'menu-fold' : 'menu-unfold'"
+              @click="toggle"></a-icon>
           </div>
-          <a-icon
-            v-else
-            class="trigger"
-            :type="collapsed ? 'menu-fold' : 'menu-unfold'"
-            @click="toggle"></a-icon>
+          <user-menu class="header-index-right" :theme="theme" :style="topMenuStyle.headerIndexRight"/>
         </div>
-        <user-menu class="header-index-right" :theme="theme" :style="topMenuStyle.headerIndexRight"/>
       </div>
     </div>
 
@@ -68,8 +87,10 @@
     props: {
       mode: {
         type: String,
-        // sidemenu, topmenu
-        default: 'sidemenu'
+        // sidemenu, topmenu, iotmenu
+        // IoT Edge相关 修改框架
+        default: 'iotmenu'
+        // default: 'sidemenu'
       },
       menus: {
         type: Array,
@@ -174,6 +195,27 @@
 </script>
 
 <style lang="less" scoped>
+
+  // IoT Edge相关 修改框架
+  @iotHContentHeight: 48px;
+  @iotHLineHeight: 8px;
+  .iotmenu-header{
+    .top-line{
+      width: 100%;
+      height: @iotHLineHeight;
+      background: linear-gradient(90deg,#008cd6,#004280);
+    }
+    .iotmenu-header-content{
+      height: @iotHContentHeight !important;
+      line-height: @iotHContentHeight !important;
+      .user-wrapper{
+        /deep/ .avatar{
+          margin: 0 10px 0 0 !important;
+        }
+      }
+    }
+  }
+
   /* update_begin author:scott date:20190220 for: 缩小首页布局顶部的高度*/
 
   @height: 59px;

src/components/page/GlobalLayout.vue

@@ -33,7 +33,9 @@
         :collapsible="true"></side-menu>
     </template>
     <!-- 下次优化这些代码 -->
-    <template v-else>
+    <!-- IoT Edge相关 修改框架 -->
+    <template v-if="layoutMode === 'topmenu' ">
+    <!-- <template v-else> -->
       <a-drawer
         v-if="device === 'mobile'"
         :wrapClassName="'drawer-sider ' + navTheme"
@@ -70,7 +72,45 @@
 
       <!-- layout content -->
       <a-layout-content :style="{ height: '100%', paddingTop: fixedHeader ? '59px' : '0' }">
-        <slot></slot>
+        <!-- IoT Edge相关 修改框架 -->
+        <template v-if="layoutMode === 'iotmenu' ">
+          <!-- <a-drawer
+            v-if="device === 'mobile'"
+            :wrapClassName="'drawer-sider ' + navTheme"
+            placement="left"
+            @close="() => this.collapsed = false"
+            :closable="false"
+            :visible="collapsed"
+            width="200px"
+          >
+            <side-menu
+              mode="inline"
+              v-if="device === 'mobile'"
+              :menus="menus"
+              @menuSelect="menuSelect"
+              @updateMenuTitle="handleUpdateMenuTitle"
+              :theme="navTheme"
+              :collapsed="false"
+              :collapsible="true"></side-menu>
+          </a-drawer> -->
+          <side-menu
+            v-show="device === 'desktop'"
+            mode="inline"
+            :menus="menus"
+            @menuSelect="myMenuSelect"
+            @updateMenuTitle="handleUpdateMenuTitle"
+            :theme="navTheme"
+            :collapsed="collapsed"
+            :collapsible="true"></side-menu>
+          
+          <div class="iotmenu-content">
+            <slot></slot>
+          </div>
+        </template>
+        
+        <template v-else>
+          <slot></slot>
+        </template>
       </a-layout-content>
 
       <!-- layout footer -->
@@ -127,6 +167,7 @@
     },
     watch: {
       sidebarOpened(val) {
+        console.log('vvvvv', val)
         this.collapsed = !val
       }
     },
@@ -316,6 +357,38 @@
       }
     }
 
+    // IoT Edge相关 修改框架 --强制修改布局样式
+    .iotmenu{
+      display: block !important;
+      height: 100vh;
+      overflow: hidden;
+      background-color: #edf2f7 !important;
+      .ant-layout-header{
+        .header{
+          // height: 56px !important;
+          background-color: #fff;
+          color: rgba(0,0,0,65);
+          box-shadow: 0 2px 4px 0 rgba(50,50,51,.5);
+          z-index: 9999;
+          padding: 0;
+        }
+      }
+      .ant-layout-content{
+        display: flex !important;
+        height: calc(100vh - 56px) !important;
+        overflow: hidden;
+        .ant-layout-sider{
+          height: 100%;
+          overflow: auto;
+        }
+        .iotmenu-content{
+          width: 100%;
+          height: 100%;
+          overflow: auto;
+        }
+      }
+    }
+
     .header {
       height: 64px;
       padding: 0 12px 0 0;

src/components/setting/SettingDrawer.vue

@@ -79,7 +79,21 @@
               </template>
               <div class="setting-drawer-index-item" @click="handleLayout('topmenu')">
                 <img src="https://gw.alipayobjects.com/zos/rmsportal/KDNDBbriJhLwuqMoxcAr.svg" alt="topmenu">
-                <div class="setting-drawer-index-selectIcon" v-if="layoutMode !== 'sidemenu'">
+                <!-- IoT Edge相关 修改框架 -->
+                <div class="setting-drawer-index-selectIcon" v-if="layoutMode === 'topmenu'">
+                <!-- <div class="setting-drawer-index-selectIcon" v-if="layoutMode !== 'sidemenu'"> -->
+                  <a-icon type="check"/>
+                </div>
+              </div>
+            </a-tooltip>
+            <!-- IoT Edge相关 修改框架 -->
+            <a-tooltip>
+              <template slot="title">
+                iot导航
+              </template>
+              <div class="setting-drawer-index-item" @click="handleLayout('iotmenu')">
+                <img src="https://gw.alipayobjects.com/zos/rmsportal/KDNDBbriJhLwuqMoxcAr.svg" alt="iotmenu">
+                <div class="setting-drawer-index-selectIcon" v-if="layoutMode === 'iotmenu'">
                   <a-icon type="check"/>
                 </div>
               </div>
@@ -94,7 +108,9 @@
                   </template>
                   <a-select size="small" style="width: 80px;" :defaultValue="contentWidth" @change="handleContentWidthChange">
                     <a-select-option value="Fixed">固定</a-select-option>
-                    <a-select-option value="Fluid" v-if="layoutMode !== 'sidemenu'">流式</a-select-option>
+                    <!-- IoT Edge相关 修改框架 -->
+                    <a-select-option value="Fluid" v-if="layoutMode === 'topmenu'">流式</a-select-option>
+                    <!-- <a-select-option value="Fluid" v-if="layoutMode !== 'sidemenu'">流式</a-select-option> -->
                   </a-select>
                 </a-tooltip>
                 <a-list-item-meta>
@@ -238,7 +254,9 @@
         this.$store.dispatch('ToggleFixedHeaderHidden', autoHidden)
       },
       handleFixSiderbar (fixed) {
-        if (this.layoutMode === 'topmenu') {
+        // IoT Edge相关 修改框架
+        if (this.layoutMode === 'topmenu' || this.layoutMode === 'iotmenu') {
+        // if (this.layoutMode === 'topmenu') {
           fixed = false
         }
         this.dataFixSiderbar = fixed

vue.config.js

@@ -76,7 +76,7 @@ module.exports = {
       less: {
         modifyVars: {
           /* less 变量覆盖，用于自定义 ant design 主题 */
-          // IoT Edge 修改框架
+          // IoT Edge相关 修改框架
           'primary-color': '#019ff3',
           // 'primary-color': '#1890FF',
           'link-color': '#019ff3',